在上一篇 Redux 学习笔记中，我们介绍了 Redux 的概念、作用、和基本使用方法。本篇将更深入地介绍 Redux 的核心原理，包括数据流动、reducer、store、Action 和中间件等。
数据流动
在 Redux 中，数据流向是单向的：从组件到 store，再到组件。在用户与应用程序交互时，组件会触发 Action，Action 中包含用户已经执行的动作。这些 Action 被传递给 reducer，reducer 根据 Action 中的 type 属性，返回新的 state。新的 state 保存在 store 中，经过 store 的 subscribe 监听，对于任何更新了 state 的视图，即组件重新 render。
Reducer
reducer 是 Redux 中核心的数据处理部分。它是一个纯函数，接收当前的 state 和一个 Action，返回新的 state。在 reducer 函数中，根据 Action 的 type 属性判断应该怎么样修改 state。
reducer 函数示例：
-- -------------------- ---- ------- ----- ----------- - ------ - --- ------- -- - ------ ------------- - ---- ----------- ------ - --------- - --- ---------- ----- ------------ ---------- ----- - - ---- -------------- ------ -------------- -- -------- --- ---------- - --------- ---------- ---------------- - ---- - -------- ------ ----- - -展开代码
以上示例中的 reducer 函数接收当前的 state 和一个 Action 对象，根据 Action 中的 type 属性从而返回新的 state。
Store
store 是 Redux 中管理所有 state 的地方。store 包含了三个主要的功能：
- 提供
getState()方法获取当前的 state - 提供
dispatch(action)方法更新 state - 提供
subscribe(listener)方法监听 state 的改变
store 的创建和使用示例：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------- -- - ----- ---- --------------- ----- ------- -- ----- ----- ----- ---------------- ----- ----------- --- -- ----- --- ------ --- -- -- ----- - ----- -- ------------------ -- - ------------------------------ ---展开代码
Action
在 Redux 中，组件只能通过向 store 发送 Action 来改变 state。Action 是一个普通的 JavaScript 对象，它描述了组件中用户的某个操作。一个 Action 对象必须有一个 type 属性来指定操作的类型。
{ type: 'ADD_TODO', // 必须有 type 属性 id: 0, text: '学习 Redux' }
中间件
Redux 的中间件是指在处理 Action 和 reducer 交互过程中的扩展点。中间件允许你在处理 Action 之前和之后都能够执行一些行为，比如打印日志、创建异步操作等等。中间件是可以组合的，每个中间件对 Action 的处理结果都会作为下一个中间件的参数。
示例代码：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ --------------- ---- -------------- ------ ----------- ---- ------------- ----- ----------- - ------------------ -- ----- ---------- -- ----- ----- - ------------ ------------ ------------------------------- --展开代码
以上示例中，我们使用了一个额外的 thunk middleware，它可以让 redux 支持异步 action。
总结
Redux 是一个非常流行的 JavaScript 状态管理库。它的核心原理是单向数据流，通过 reducer、store、Action 和中间件来实现。理解 Redux 的核心原理是成为一名优秀前端工程师的必要技能之一，本文介绍的内容对前端开发者有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496f63b48841e9894420bf6
