react-redux

介绍

facebook  自家的 redux

• react–redux 让 redux 的使用更加灵活；
• 更加的像 vuex.虽然 vuex 也是基于 redux 得

npm i react-redux

---

---

流程

容器组件

只是一个连接 UI 组件和 redux 的桥梁，不是通常的组件写法。

• 

传递 store

根组件中通过 props 向容器组件中传递 store

• 

传参

容器组件向 UI 组件传值

• 传递的 props 写到 connect 的第参数中。
• connect 第一个参数   中有两个参数，需要传两个函数，且这两个函数的返回值都必须是一个对象，就是 props 状态。
• 第一个函数（<font style="color:#61AFEF;">mapStateToProps</font>）的参数是 state –映射状态
  • 
• 第二个函数（<font style="color:#61AFEF;">mapDispatchToProps</font>）的参数是 dispatch  –映射操作状态的方法
  • 
• 总结
  • 
• 语法上简写  connect ,  就直接把的传两函数 写到参数体里面
  • 
• 第二个   函数mapDispatchToProps 的简写为一个对象。react-redux 可以自动帮你 dispatch,只用写事件名：action 即可。
  • 

与 redux 的差异

>>使用了 react-redux  就不需要   手动配置   状态更新了。容器组件自己配备响应式更新状态的功能。

• 

>>使用 react-redux 的 api –**Provider**。  就不用在根组件中 向每个容器组件 一个一个的传递 store 了。Provider 帮你都安排上了。

• 

>>真实开发 合并 ui 和容器   组件为   一个 jsx。巴巴适适的

---

实践

1. 目录建议

• 目录就该如此的写   容器组件和 ui 写到一起，一般都写到 container 目录，component 也可以
• 分离 actions 和 reducers 为两个文件夹，存放不同容器的 actions 和 reducers.
• constant 常量.js  和 store.js 都写在 redux 根中。

–redux 核心状态 state  合并为一个对象。就像 vuex 那样。

**2. combinReducers **

• 引入 combinReducers  整合   所有的 reducers 状态

• 合并 reducers 状态

• 然后就能实现真正的数据共享了，所有的容器组件中的 reducer 初始化还是后期更新的数据，都可以愉快的交叉使用啦。
• 还有就是把   所有 reducers 写到一个 index.js  统一暴露出来。
  • 
• store 中引入哈就 ok 了
  • 

>总结<

–