阅读 240

Redux的基础概念理解

在学习React时了解到可以用Redux来作为React应用的状态管理器,那么redux到底是什么呢?该怎么使用呢?我需要好好了解一番

为什么React 需要 Redux 这类状态管理库

为了方便组件间的通信

React组件有两个很重要的属性叫props和state,他们本质是一个JavaScript对象。 props属性是只读的,它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。 state属性用来维护组件内部数据。该属性是私有的,并且完全受控于当前组件。

  • this.state 来获得state对象
  • this.setState() 来更新state对象 当用户操作、网络响应或者其他变化而需要动态更新UI的时候,我们通过更新其state来实现。

在 React 中,父组件向子组件通信很容易,但是祖父向孙子,子向父,兄弟组件间的通信则比较麻烦,需要通过props由上到下层层传递,或者由下到上层层回调,如果层级太深,显然实现起来很麻烦。而在实际的大型的应用,这几种场景是无法避免的,所以需要借助 Redux 来解决这个问题。

那Redux是如何解决的呢?简单来说就是,整个应用的状态state存储在一个 叫做 Store 的对象里。使得应用的整个状态存储在同一个地方。任何组件都能直接访问到它,改变它,不过改变state也需要遵循一定的约束规则,让状态变化结果变得能预测。当数据状态发生变化后,使用到数据的地方也会被通知到。

因此,有了Redux来作为状态管理器,组件间的通信就非常方便了。祖父组件向孙子组件传递state信息不再需要通过父组件来传递了。相同的,孙子组件向祖父组件传递数据也不需要通过调用父组件回调函数来实现了。

Redux基础知识

Redux官方文档

Redux是什么

Redux是一个前端开发库,是 JavaScript 程序的可预测状态容器,用于整个应用的状态管理。提供最简化 API,做到行为的完全可预测。使得 Redux 开发的应用易于测试,可以在不同环境中运行,并显示一致的行为。

Redux 和 React 之间没有关系。Redux搭配React使用非常好用而已。除此之外,Redux还支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。

Redux遵循的三个原则

Redux 不允许程序直接修改数据,而是用一个叫作 “action” 的普通对象来对更改进行描述。

  • 单一数据源 整个应用的数据状态都存储在一个叫做 Store 的对象里。使得应用的整个状态存储在同一个地方。单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序。

  • 不能直接修改state 不能像在React中通过this.setState() 来更新state对象,改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。该操作是对数据更改的最小表示。

  • 使用纯函数进行修改 为了指定状态树如何通过操作进行转换,需要使用纯函数保证结果的一致性。每次相同的 action操作作用于相同的状态,得到的新的状态一定要是相同的。

Redux核心概念

Redux基于遵循的三个原则,核心概念有:

  • store – 整个程序的状态/对象树保存在Store中。
  • action – 这是一个用来描述发生了什么事情的对象。
  • reducer – 这是一个确定状态将如何变化的地方。
  • dispatch – 触发action,将action和reducer对应起来。
  • applyMiddleware - 这是 action 被发起之后,到达 reducer 之前的扩展点。
  • view - 展示状态信息的UI。

store

原则1的实践

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。

action

原则2的实践

唯一改变 state 的办法是触发 action,一个描述发生什么的对象。本质上是 JavaScript 普通对象。Redux中约定了action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。

强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了,就可以知道为什么变。action 就像是描述发生了什么的指示器。

reducer

原则3的实践

为了把 action 和 state 串起来,开发一些函数,这就是 reducer。reducer 只是一个接收先前的 state 和 action,并返回新的 state 的纯函数。

reducer是纯函数,一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。

reducer是纯函数。它仅仅用于计算下一个 state。它应该是完全可预测的。多次传入相同的输入必须产生相同的输出。

Dispatch

原则2的实践

dispatch派发action来调用reducer方法,从而更改数据。

applyMiddleware

中间件函数用来对store.dispatch函数进行扩展(或者说是加工)。它提供的是位于 action 被发起之后,到达 reducer 之前的扩展点。 你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。

参考资料

为什么 React 需要 Redux 这类状态管理库