redux学习笔记

redux流程

1. view直接触发dispatch
2. 将action发送到reducer中后，根节点上会更新props，改变全局view

redux概念理解

store相关

• redux中的store是通过createStore方法创建的，该方法接收两个参数reducer函数和初始化的数据(currentState)，从而形成一颗状态树
• createStore方法调用时传入的reducer方法会在store的dispatch被调用的时候，被调用，接收store中的state和action，根据业务逻辑（即reducer方法）返回新的state
• store含有四个方法，subscribe、dispatch、getState和replaceReducer
  
  1. subscribe:接收一个回调(listener)，当dispatch触发时，执行reducer函数去修改当前数据(currentState)，并执行subscribe传入的回调函数(listener)
  2. dispatch:分发 action。这是触发 state 变化的惟一途径
  3. getState:返回应用当前的 state 树
  4. replaceReducer:替换 store 当前用来计算 state 的 reducer,不常用

可参考官方文档（翻译版）

react-redux概念理解

1. 提供Provider组件，可以将从createStore返回的store放入context中，使子集可以获取到store并进行操作

<Provider store={store}>
    <App />
</Provider>

1. 提供connect方法

   • 将原始根节点包装在Connect下，在Connect中的state存储不可变对象，并将state对象中的props和store中的dispatch函数传递给原始根节点。
   • Connect在componentDidMount中，给store添加listener方法(handleChange)，每当store中的dispatch被调用时执行handleChange；handleChange会去修改state中的porps，使原始根节点重新render
   • 方法调用connect(mapStateToProps, mapDispatchToProps, mergeToProps)(App);
     
     1. mapStateToProps:定义该参数，组件将会监听 Redux store 的变化,接收store中state和props，使页面可以根据当前的store中state和props返回新的stateProps
     2. mapDispatchToProps:接收store中的dispatch和props，使页面可以复写dispatch方法，返回新的dispatchProps
     3. mergeToProps:将前两个方法参数的执行结果和组件自身的 props 传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中

   可参考官方文档（翻译版）

2. Middleware理解

   • 文档中的例子

     const createStoreWithMiddleware = applyMiddleware(
         thunkMiddleware,
         loggerMiddleware
     )(createStore);
     store = createStoreWithMiddleware(rootReducer, initialState);

   • 可以看作middleware1(middleware2(middleware3(store.dispatch)))(action)，因此每个middleware中的next是一个接收action的函数(middleware定义时有体现)，在最后一个middleware中，next函数就是store.dispatch，这样action就在middleware中传递下去

问题

1. 更新机制，测试应用中，store状态更新后，整个组件全部更新,难道每个组件都需要自己写shouldComponentUpdate方法吗？
2. 与react-router结合的用法

参考

这段时间研究了下Redux，写写自己对它的感觉

redux middleware 详解