React-Redux 教程

Redux

Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。

本库并不是 Redux 内置，需要单独安装。

React、Redux、React-Redux

相信很多新手朋友们对于 React、Redux、React-Redux 这三者之间的关系和区别肯定有很多不解和疑惑。这里我们就来详细的剖析一下它们吧。

• React：负责组件的 UI 界面渲染；
• Redux：数据处理中心；
• React-Redux：连接组件和数据中心，也就是把 React 和 Redux 联系起来。

Redux 和 React-redux 并不是同一个东西。

Redux 是一种架构模式（Flux 架构的一种变种），它不关注你到底用什么库，你可以把它应用到 React 和 Vue，甚至跟 jQuery 结合都没有问题。

而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库，就是 Redux 架构在 React.js 中的体现。

React-Redux

Redux 本身和 React 没有关系，只是数据处理中心，是 React-Redux 让他们联系在一起。

React-rRedux 提供两个方法： connect 和 Provider 。

在最外层容器中，把所有内容包裹在 Provider 组件中，将之前创建的 store 作为 prop 传给 Provider。

const App = () => {
  return (
    <Provider store={store}>
      <Comp/>
    </Provider>
  )
};

Provider 内的任何一个组件（比如这里的 Comp），如果需要使用 state 中的数据，就必须是「被 connect 过的」组件——使用 connect 方法对「你编写的组件（MyComp）」进行包装后的产物。

class MyComp extends Component {
  // content...
}

const Comp = connect(...args)(MyComp);

connect 方法是重中之重。

connect

connect() 接收四个参数，它们分别是 mapStateToProps，mapDispatchToProps，mergeProps 和 options。

connect 连接 React 组件和 Redux store。connect 实际上是一个高阶函数，返回一个新的已与 Redux store 连接的组件类。

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

复制代码 TodoList 是 UI 组件，VisibleTodoList 就是由 react-redux 通过 connect 方法自动生成的容器组件。

• mapStateToProps：从 Redux 状态树中提取需要的部分作为 props 传递给当前的组件。
• mapDispatchToProps：将需要绑定的响应事件（action）作为 props 传递到组件上。

Provider

Provider 实现 store 的全局访问，将 store 传给每个组件。 原理：使用 React 的 context，context 可以实现跨组件之间的传递。