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
发布了110 篇原创文章 · 获赞 8 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览