阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 提供两个方法: connectProvider

      在最外层容器中,把所有内容包裹在 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 可以实现跨组件之间的传递。

      目录
      目录