React-Redux 教程

🌙
手机阅读
本文目录结构
axihe

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 可以实现跨组件之间的传递。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang