React 实战 | React Redux 的使用指南

React Redux

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。细节参考React Redux官方英文文档

安装

npm install react-redux
或
yarn add react-redux

Provider

<Provider / >全局使用

Connect() 连接组件和store，容器属性中使用

两个参数：mapStateToProps和mapDispatchToProps

使用mapStateToProps抽取数据（mapState）

作为connect的第一个参数，每当store state 改变时就被调用

不希望订阅store，传递null或undefined替代mapStateToProps。

接收整个store state，并返回一个组件需要的数据对象

• 声明：function mapStateToProps(state, ownProps?)返回连接组件需要的数据的纯对象。

1. State，整个store state对象
2. ownProps（可选），组件需要用自身的props数据从store中检索出数据，传入ownProps。包含所有传递被connect的组件的props。
3. 返回值，包含组件用到的数据的纯对象
   每个对象字段作为组建的props
   字段中的值用来判断组件是否需要重新渲染

• 使用指南：使用mapStateToProps改造从store中取出的数据

1. 使用Selector方法去抽取和转化数据
2. mapStateToProps方法应该足够快
3. mapStateToProps方法应该纯净且同步

• mapStateToProps和性能

1. 仅在需要时返回新的对象引用（浅比较）
   使用selector function，只在输入值发生改变后运行。
2. 仅在数据改变时运行开销大的操作
   一些转化可以在action创建函数或者reducer中运算，把转化过的数据存储在store中
   转化也可以在组件的render()生命周期中完成
   若转化必须在mapStateToProps方法中完成，建议使用selector function

• 行为与总结

1. mapStateToProps在store state相同的情况下不会运行
2. 声明参数的数量影响行为
   不应该增加ownProps参数，除非你实在是需要它。

使用mapDispatchToProps分发actions

• 分发actions的路径：

1. 默认地，一个已连接组件可以接收props.dispatch然后自己分发actions
2. Connect能够接收mapDispatchToProps作为第二个参数
   更加声明式
   指明你的组件所实际需要分发的那些actions，把所有的action creators使用函数封装起来
   把action分发逻辑向子（未连接）组件传递

• 两种mapDispatchToProps的形式

1. 函数形式，更高自由度、能够访问dispatch和可选择的ownProps
2. 对象形式，更声明式，更易于使用（建议使用）

将mapDispatchToProps定义为一个函数**

1. 参数： dispatch、ownProps（可选）

• 返回值：返回一个纯对象

1. 每一个对象的字段都会作为你的组件的一个独立prop，并且字段的值通常是一个调用后能分发action的函数。
2. 如果你在dispatch()中使用了action创建函数（区别于纯对象形式的action），通常约定字段名与action创建函数的名称相同

• 使用bindActionCreators定义mapDispatchToProps函数
  bindActionCreators 接收两个参数：

1. 一个函数（action creator）或一个对象（每个属性为一个action creator）
2. Dispatch

• 手动注入dispatch
  可以通过在mapDispatchToProps的return中添加dispatch把它重新注入你的组件

将mapDispatchToProps定义为一个对象

1. 每个mapDispatchToProps对象的字段都被假设为一个action创建函数
2. 你的组件不再接收dispatch作为一个prop