Genius Lab.

React Redux

react-redux
Word count: 759Reading time: 2 min
2020/03/22 Share

React和Redux

React和Redux本身并没有什么关联,React负责视图层的构建,Redux负责数据流的处理.

react-redux的核心功能只有两个: Provider组件和connect方法.

Provider组件传入store对象,能让子组件直接访问store

connect方法真正连接了Redux store和React组件.connect方法通过传入mapStateToProps, mapDispatchToProps等参数,计算出应该传递给React组件哪些属性和信息.

react-redux

connect()

https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect

1
2
import { connect } from 'react-redux'
connect(  mapStateToProps, mapDispatchToProps)(WrappedComponent)

相当于一个高阶组件

将React组件和Redux连接起来

它为连接的组件提供需要的store中的数据，以及可用于向store dispatch actions 的方法。

它不会修改传递给它的组件类。而是返回一个新的，已连接的组件类，该类包装了传入的组件。

connect执行两次,第一次是设置参数,第二次接收一个展示组件,并在该组件的基础上返回一个新的容器组件.

和 搭配使用

参数

  1. mapStateToProps?: Function
  2. mapDispatchToProps?: Function | Object
  3. mergeProps?: Function
  4. options?: Object

mapStateToProps函数

可以把state传给展示组件

这个函数会接受store.getState()的结果作为参数,然后返回一个对象,这个对象是根据 state 生成的.

mapStateTopProps 相当于告知了 Connect 应该如何去 store 里面取数据/取什么数据/对数据进行何种处理，然后可以把这个函数的返回结果传给被包装的组件WrappedComponen

mapDispatchToProp函数

通过mapDispatchToProp函数来告知组件需要如何触发dispatch.

这个函数接受 store.dispatch方法 作为参数

和 mapStateToProps 一样，它返回一个对象dispatchProps，这个对象内容会同样被 connect 当作是 props 参数传给被包装的组件。

最后,connect把 stateProps、dispatchProps、this.props 三者合并到 this.state.allProps 里面去，这三者的内容都会在 render 函数内全部传给被包装的组件。被包装的组件可以通过props获取state和方法

Smart组件和Dumb组件

smart组件

smart组件专门做数据相关的应用逻辑，和各种数据打交道、和 Ajax 打交道，然后把数据通过 props 传递给 Dumb，它们带领着 Dumb 组件完成了复杂的应用程序逻辑。

Dumb组件

Dumb组件的目的之一是为了复用,所以

注意:

  1. Dumb 组件最好不要依赖除了 React.js 和 Dumb 组件以外的内容。它们不要依赖 Redux 不要依赖 React-redux。
  2. 不要在Dumb组件下引用smart组件

dumb组件通过调用props中的on函数来传递参数和调用dispatch

components和containers

dumb组件一旦使用了connect 就会变成smart组件

为了解决这个问题,

我们把 Smart 和 Dumb 组件分开到两个不同的目录，不再在 Dumb 组件内部进行 connect

1
2
3
src/
components/
containers/

所有的 Dumb 组件都放在 components/ 目录下，所有的 Smart 的组件都放在 containers/ 目录下，这是一种约定俗成的规则。

Author：SuuugaZ

原文链接：http://yoursite.com/2020/03/22/React_Redux/

发表日期：March 22nd 2020, 2:09:19 pm

更新日期：March 22nd 2020, 2:15:08 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. React和Redux
  2. 2. react-redux
    1. 2.0.1. connect()
    2. 2.0.2. Smart组件和Dumb组件
    3. 2.0.3. components和containers
Total : 6
2020
intro Redux react-redux react git dva,redux