一、基本概念
1.Store
Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
2.State
Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。
这种时点的数据集合,就叫做 State。
当前时刻的 State,可以通过store.getState()拿到。
3.Action
State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置。
4.Action Creator
如下,addTodo就是一个Action Creator:
5.store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。
6.Reducer
Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
实际应用中,Reducer 函数不用像上面这样手动调用,store.dispatch方法会触发 Reducer 的自动执行。
为此,Store 需要知道 Reducer 函数,做法就是在生成 Store 的时候,将 Reducer 传入createStore方法。
如上创建store对象后,以后每当store.dispatch发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State。
【扩展】
为什么这个函数叫做 Reducer 呢?因为它可以作为数组的reduce方法的参数。
附reduce执行步骤:
actions.reduce(reducer,0)
reducer(state,action)
0作为第一个传入的参数,即,初始的state === 0,action === {type:'ADD',payload:0},执行后,返回值赋给state,继续取actions数组下一个成员,action === {type:'ADD',payload:1},直到数组项全部取出,执行完毕。total最终等于3。
7.纯函数
Reducer 函数最重要的特征是,它是一个纯函数。也就是说,只要是同样的输入,必定得到同样的输出。
由于 Reducer 是纯函数,就可以保证同样的State,必定得到同样的 View。
但也正因为这一点,Reducer 函数里面不能改变 State,必须返回一个全新的对象,请参考下面的写法:
【注意】
最好把 State 对象设成只读。你没法改变它,要得到新的 State,唯一办法就是生成一个新对象。
这样的好处是,任何时候,与某个 View 对应的 State 总是一个不变的对象。
8.store.subscribe()
Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。
【设置监听】
state发生变化,会自动执行listener。
【注意】
store.dispatch() ——> reducer自动执行 ——> state更新 ——> listener自动执行
显然,只要把 View 的更新函数(对于 React 项目,就是组件的render方法或setState方法)作为listener,就会实现 View 的自动渲染。listener可以通过store.getState()得到当前状态,这时可以setState(newState)。
【解除监听】
二、Store的实现
import { createStore } from 'redux';
let store = createStore(reducer);
createStore方法还可以接受第二个参数,表示 State 的最初状态。这通常是服务器给出的。
let store = createStore(reducer, window.STATE_FROM_SERVER);
window.STATE_FROM_SERVER就是整个应用的状态初始值。
【注意】
如果提供了这个参数,它会覆盖 Reducer 函数的默认初始值。
【createStore方法的简单实现】
三、Reducer 的拆分
1.概述
由于,不同的action改变state不同的三个属性,并且,这三个属性之间没有联系,因此可以将这个reducer进行拆分。
【说明】
chatLog、statusMessage、userName是三个小的reducer。
当总的reducer被调用,传入action,小的reducer会被逐个执行。
每个小reducer执行,都会返回一个state:
(1)如果传入的action,在当前的小reducer中,成功匹配到case,则对state进行更新后,返回新的state。
(2)如果传入的action,在当前的小reducer中,没有匹配到case,则走default,原封不动的返回state。
总reducer返回值是一个对象,格式为,{reducerName1:state1,reducerName2:state2 ......}
【注意】
总reducer返回的对象里,只有一个reducerName对应的是新的state(如果state的处理,按照上例的逻辑,返回Object.assign({ },state)),其他reducerName对应的都是旧的state,且指向同一地址。
2.【使用combineReducer进行reducers的合并】
【注意】
*上述写法要求,State 的属性名必须与子 Reducer 同名。
【个人理解】
这个要求是由es6对象的简写写法+combineReducer的执行机制,共同造成的。
(1)es6里,{chatLog,statusMessage,userName} 等同于 {chatLog:chatLog,statusMessage:statusMessage,userName:userName}
(2)combineReducer执行机制:当store.dispatch,会触发合成后的reducer(即chatReducer)自动执行。chatReducer执行,返回的是
{
chatLog:chatLog(state.chatLog,action),
statusMessage:statusMessage(state.statusMessage,action),
userName:userName(state.userName,action)
}
这里,state.依次读取的属性名,就是传入combineReducer的对象的属性名。
*如果State 的属性名与子 Reducer 不同名,就要采用下面的写法。
再次理解combineReducer执行机制:
当store.dispatch触发总reducer自动执行时,传入combineReducer的每一个子reducer会依次执行、逐个执行。而传入子reducer的参数,就是state.[子reducer对应的key]和action。
3.combineReducer的简单实现
4.实际使用
你可以把所有子 Reducer 放在一个文件里面,然后统一引入。
四、栗子(计数器)
#整理自http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html