深入浅出React+Redux（五：React-Redux）

最新推荐文章于 2024-07-15 20:52:00 发布

Justin0223

最新推荐文章于 2024-07-15 20:52:00 发布

阅读量1k

点赞数

文章标签： React-Redux React

本文链接：https://blog.csdn.net/u010377383/article/details/79438414

版权

前言

React 应用的两个方法，第一是把一个组件拆分为容器组件和傻瓜组件，第二是使用 React 的 Context 来提供一个所有组件都可以直接访问的 Context，也不难发现，这两种方法都有套路，完全可以把套路部分抽取出来复用，这样每个组件的开发只需要关注于不同的部分就可以了。

实际上，已经有这样的一个库来完成这些工作了，这个库就是 react-redux 。

（一）React-Redux 基本概念

React+Redux基本概念

相关代码已经推送到
我的github的simple-redux分支

现在提及React-Redux的最要功能：

connect ： 连接容器组件和无状态组件(stateless)
Provider ： 提供包含 store 的 context(提供React-Router传递)。

（二）connect

我们以Counter组件为例子。

import React from 'react';
import {connect} from 'react-redux';
function Counter({caption, onIncrement, onDecrement, value}) {
    ...
}

// 容器组件，
// 把store上的状态转化为内层傻瓜组件的prop，
// 把内层傻瓜组件中的用户动作转化为派送给store的动作
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

第一眼看去，会让人觉得这就类似thunk函数, 在函数执行完成再次返回一个函数。

其实， connect 是 react-redux提供的一个方法，这个方法接收两个参数 mapStateToProps 和 mapDispatchToProps ，执行结果依然是一个函数，所以才可以在后面又加一个圆括号，把 connect 函数执行的结果立刻执行，这一次参数是 Counter 这个傻瓜组件。

这里有两次函数执行，第一次是 connect 函数的执行，第二次是把 connect 函数返回的函数再次执行，最后产生的就是容器组件，功能相当于上一章的CounterContainer 。

总结：
这个 connect 函数具体做了什么工作呢？
作为容器组件，要做的工作无外乎两件事：

把 Store 上的状态转化为内层傻瓜组件的 prop;
把内层傻瓜组件中的用户动作转化为派送给 Store 的动作 。

这两个工作一个是内层傻瓜对象的输人，一个是内层傻瓜对象的输出。

（1）mapStateToProps

Counter 组件对应的 mapStateToProps 函数代码如下：

function mapStateToProps(state, ownProps) {
  const { demo } = state;
  return {
    value: demo[ownProps.caption]
  }
}

上面代码。mapStateToProps接受2个参数，一个是store的state，一个是组件输入的props（ownProps），使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。

（2）mapStateToProps

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。它可以是一个函数，也可以是一个对象。

Counter 组件对应的 mapStateToProps函数代码如下：

import * as Actions from '../../actions/demoActions';
function mapDispatchToProps(dispatch, ownProps) {
  return {
    onIncrement: () => {
      dispatch(Actions.increment(ownProps.caption));
    },
    onDecrement: () => {
      dispatch(Actions.decrement(ownProps.caption));
    }
  }
}

上面代码。mapDispatchToProps接受2个参数，一个是store的dispatch，负责配合Actions中定义的函数，将用户的操作应该当作 Action，传给 Store。一个是组件输入的props（ownProps）

总结：
从上面代码我们可以知道，mapStateToProps 和 mapDispatchToProps 都可以包含第二个参数，代表 ownProps，也就是直接传递给外层容器组件的 props 。

前者负责把 Store 上的状态转化为内层傻瓜组件的 prop。
后者负责把内层傻瓜组件中的用户动作转化为派送给 Store 的动作。