FullStackOpen: Redux

FullStackOpen: Redux 当应用变得庞大时,状态管理应当与 React 组件进行解耦。在这一章节,我们会引入 Redux 库,也是目前 React 应用生态中最流行的状态管理解决方案。 教程:FullStackOpen2022/Part 6 本文以 unicafe-redux 与 redux-anecdotes 应用为例。对应练习 6.1-6.18,6.21。 1. Flux 架构 Facebook 开发了 Flux 架构,提供了一种标准的方式来保存应用程序的状态以及如何修改它,使状态管理更加容易。 在 Flux 架构中,状态完全从 React-components 分离到自己的存储中。存储中的状态不会直接更改,而是使用不同的 actions进行更改。当一个操作改变了存储的状态时,视图会被重新渲染。 2. 在 React 中使用 Redux Redux 使用与 Flux 相同的原理,但是更简单一些。 安装 Redux: npm install redux 定义 reducer 处理 state 与 action 在 Redux 中,状态 state 存储在 store 中。存储的状态 state 通过 action 改变,action 对状态 state 的影响通过使用一个 reducer 来定义。 实际上,reducer 是一个函数,它以当前状态 state 和 action 为参数,返回一个新的状态 state。...

2022-05-16 · 6 min