# Redux ## 1. Store 通过creatStore函数生成store ## 2. State 通过store.getState 从Store中获取数据。 ## 3. Action 一个包含type data的对象。 > Action-Creator一个生成action的函数 return action对象。 > ## 4. Reducer Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。 内部通过switch来进行状态判断，对不同状态进行各自对应的处理操作。 Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。 ## 用过的中间件 redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。 原理： 通过判断action的类型，如果是函数类型，就会返回一个包含dispatch getState 以及 arguments的action，否则就返回正常的action。 # 项目里的使用方法。 1. 在main.js中，使用createStore方法，传入reducer，第二个参数为applyMiddleware在整合中间件，最终构成store。 2. 在main.js中，使用<Provider> 将Capp组件包裹起来，同时传入store。 3. 在Capp.jsx中，使用mapStateToProps和mapDispatchToProps，将reducer中改变的state和方法通过props的方式给到App.jsx，并使用connect方法，将两者传入App。 4. reducer中可以使用combinReducer将多个reducer整合起来。 ## Capp 因为React-redux的引入 我们使用container-Capp用来集中处理 state与dispatch的情况。 并使用connect连接。 ## shouldComponentUpdate一般怎么写呢 我们知道shouldComponentUpdate可以最多传入2个参数，nextProps nextState。 在进行比较时，我们使用JSON.stringfy来进行比较。 # 源码解析 #### creatStore.js 传入三个参数。reducer, 默认stare，enhancer，返回store对象。 在 在调用subscribe函数（订阅一个状态改变后，要触发的监听函数）时，在currentListeners中push这个listener（当 dispatch action 的时候执行），同时返回一个取消订阅函数。 dispatch作为触发state变化的唯一途径。在内部执行当前reducer，返回新的state。 #### combineReducers.js 将传入的reducer整合成finalReducer，遍历所有的key和reducer，分别将reducer对应的key所代表的state，代入到reducer中进行函数调用。这也就是为什么说combineReducers黑魔法--要求传入的Object参数中，reducer function的名称和要和state同名的原因。有变化就更新变化。 #### applyMiddleware.js 返回一个以createStore为参数的匿名函数，这个函数返回另一个以reducer, initialState, enhancer为参数的匿名函数。当createStore收到的参数中有enhance时， ~~~ // createStore.js if (typeof enhancer !== 'undefined') { if (typeof enhancer !== 'function') { throw new Error('Expected the enhancer to be a function.') } return enhancer(createStore)(reducer, initialState) } ~~~ > applyMiddleware(thunkMiddleware)(createStore)(reducer, initialState) > 在返回的函数内部thunkMiddleware被调用，其作用是监测type是function的action 因此，如果dispatch的action返回的是一个function，则证明是中间件，则将(dispatch, getState)作为参数代入其中，进行action 内部下一步的操作。否则的话，认为只是一个普通的action，将通过next(也就是dispatch)进一步分发。 也就是说，applyMiddleware(thunkMiddleware)作为enhance，最终起了这样的作用： 对dispatch调用的action(例如，dispatch(addNewTodo(todo)))进行检查，如果action在第一次调用之后返回的是function，则将(dispatch, getState)作为参数注入到action返回的方法中，否则就正常对action进行分发，这样一来我们的中间件就完成喽~ 因此，当action内部需要获取state，或者需要进行异步操作，在操作完成之后进行事件调用分发的话，我们就可以让action 返回一个以(dispatch, getState)为参数的function而不是通常的Object，enhance就会对其进行检测以便正确的处理