React Redux 总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/felixking/article/details/67652385

1. 一个 Container 对应 一个 Component
2. 设计外观时 我们只用关注 Component, 而 Container 由 connect 方法生成, 其实生成完的 Container 也是 一个 React 的 Component
3. 这个 表示 外观的 Component 可以设计成与业务无关的, 比较好的设计是不要在Component的实现中直接调用 dispatch 发送 action
4. Component 可以定义 自己的 属性(数据) 和 事件 作为 接口 提供给外部访问, 这里的事件 其实就是简单的 在内部 调用(回调)了 一下(具体实现应该是由使用方来实现)
5. React 支持 简单方法 定义 Component
   如:
   const MyComp = ({ 该组件的属性和事件列表 })=>{
   return 要渲染的 jsx
   }
6. 开发Container 时, 不要自己写实现, 而是 使用 connect 来生成
7. connect 时 还需要 指定 两个参数 mapStateToProps 和 mapDispatchToProps
8. mapStateToProps 是一个函数, 返回一个对象, 对象中定义的字段 即为 Component 的属性, 当然 如果 在 Container 上直接设置的属性(包括children) 也能在 Component 中访问到(只要Component的构造参数 解包 列表中有 对应的变量名就行)
9. 当 connect 时 没有指定 mapStateToProps 则 不会 映射任何属性, 但 如果在 Container 标签 中定义的 属性(包括Children)会带入到 Component 的 构造函数 中
10. mapDispatchToProps 可以是一个函数, 返回一个对象, 对象中定义的每个字段 都对应 作为 Component 的暴露的 事件, 即可理解为是 Component 事件响应的实现, 实现中一般都会 dispatch 一个 action, 然后由 reducer 来处理 并 返回一个 新的 state(或state的局部)
11. mapDispatchToProps 也可以是一个对象, 同样 对象中定义的每个字段 都对应 作为 Component 的暴露的 事件, 而字段的值 是 一个 actionCreator, 这时 当 Component 中的 事件触发 时, 由 connect 帮我们构造的 Container 会自动 调用 dispatch 方法 发送 这个 action, 通常的用法: 可以直接 将 Component所需的事件, 用 一个对象 将 他们对于的 actionCreator 包进来, 就将这个对象作为 mapDispatchToProps 的值, 如:
    import { addItem, removeItem, showItem } as itemActions from ‘./reducers’
    connect(XXX, itemActions)(MyComp)
    然后在 MyComp 可以直接使用(解包方式) addItem 等方法 或 使用 this.props.addItem 方法
12. 同样 当 mapDispatchToProps 没有指定时, 也没法映射任何 事件, 但在 Component 构造函数参数解包列表中可以 拿到 dispatch, 注意 如果指定了 mapDispatchToProps, 就不会自动拿到 dispatch 了
13. mapStateToProps 和 mapDispatchToProps 两个函数的调用(或使用)时在 render 时(注: 并不是每次render会调, 但第一次render肯定会调), 而不是在 connect 时
14. mapStateToProps 有两个参数 state 和 props, state 即全局 store 中的 state, props 是 Container 上的 属性
15. mapDispatchToProps 也有两个参数 dispatch 和 props, dispatch 是 store 上的方法, props 是 Container 上的 属性
16. 总结 mapStateToProps 的作用 是 渲染时 为 Component 上的属性赋值, 因为这时 可以同时拿到 全局的 state 和 Container 上的 属性, 完全可以为 用于呈现的 Component 设置属性(React Component 的 props)
17. 总结 mapDispatchToProps 的作用 是 渲染时(并不一定每次) 为 Component 上的 事件 赋值, 即为 Component 的事件提供具体实现, 这时 可以 使用 dispatch 方法 发送 action, 然后由 某个 reducer 处理, 进而运算出 新的 state
18. combineReducers 由 redux 提供, 它能合并多个 小的 reducer, 这样 我们就能分解 reducer, 每个小的 reducer 只处理 state 中的 一小部分