一、Action:是把数据传到store的有效载荷,他是store数据的唯一来源。Action本质上是普通的JavaScript对象,Action内必须包含一个字符串类型的type字段,来表示要执行的动作。
Action创建的函数,就是生成action的方法,在Redux中action创建的函数只是简单返回一个action。Redux中只需把action创建函数的结果传给dispatch()方法即可发起一次dispatch过程。store里能直接通过store.dispatch()调用dispatch()方法,但是多数情况下会用react-redux提供的connect()帮助器来调用。bindActionCreators()可以自动把多个action创建函数绑定到dispatch()方法上。
Reducer 就是一个纯函数,接收旧的state和action,返回新的state。reducer一定要保持纯净,只要传入参数相同,返回计算得到的下一个state就一定相同。没有特殊情况,没有副作用,没有API请求、没有变量修复,单纯执行计算。
function todoApp(state=initialState, action) { switch(action.type){ caseSET_VISIBILITY_FILTER: return Object.assign({},state, {visibilityFilter:action.filter }) default:returnstate } }
注意:1、不要修改state,使用Object.assign()新建了一个副本,不能像这样使用:Object.assign(state, {visibilityFilter: action.filter} ) , 因为这会改变第一个参数的值,你必须把第一个参数设置为空对象。2、在default的情况下返回旧的state
combineReducers() 所做的只是生成一个函数,这个函数调用你的一系列reducer,每个reducer根据他们的key来筛选出state中的一部分数据并处理,然后这个生成的函数再将所有reducer的结果合并成一个大的对象。
store:将action和reducer联系在一起的对象。Redux应用只有一个单一的store,当需要拆分数据处理逻辑时,应该使用reducer组合而不是使用多个store。createStore()用于根据reducer创建store,第二个参数是可选的,用于设置state的初始化状态。这对于开发同构应用时非常有用,服务端redux应用的state结构可以与客户端保持一致,那么客户端可以将从网络接收到的服务端state直接用于本地数据的初始化。
数据流:严格的单向数据流:应用中所有的数据都具有相同的生命周期。
1、调用store.dispatch(action) Action就是一个描述“发生了什么”的普通对象。store.dispatch(action)可以在任何地方调用。
2、Redux store 调用传入的reducer函数。store会把两个参数传入reducer:当前的state树,和action。reducer是纯函数,它仅仅用于计算下一个state。它应该是完全可以预测的:多次传入相同的输入必须产生相同的输出。它不应该做有副作用的操作,如API调用或路由跳转。这些应该在dispatch action 前发生
3、根reducer应该把多个子reducer输出合并成一个单一的state树。combineReducers
4、Redux store 保存了根reducer返回完整的state树。