Redux 是一个流行的 JavaScript 应用程序状态管理工具。它旨在简化前端应用程序数据的存储和操作，并且能够轻松跨组件维护数据。
虽然 Redux 可以用于任何 JavaScript 应用程序，它最常用于 React 应用程序中。本文将介绍 Redux 的基本概念和工作原理，并提供一些实践经验和示例代码。
Redux 前置知识
在学习 Redux 之前，需要对 JavaScript 有一定的了解。特别是需要对闭包、函数式编程和 ES6 等语言特性有一定的掌握。如果您还没有学习这些知识，我们建议您先学习这些主题。
在这里提到的一些重要概念包括：
- 函数式编程
- 纯函数
- 组合
- 核心 Redux 概念：state、action、reducers 和 store
- React 组件在 Redux 中的作用
Redux 概述
Redux 是一个状态容器，它允许我们将应用程序数据存储在一个单独的地方，而不是分散在多个组件中。它允许我们通过 store 总体掌握应用程序状态。
核心概念
Redux 包含以下核心概念：
- State：应用程序数据，以单一对象形式呈现。
- Action：对 State 进行操作的对象，包含一个 action 类型和一个可选数据负载。
- Reducer：一个纯函数，根据 Action 的类型来更新 State。
- Store：将 State、Action 和 Reducer 结合在一起的对象。Store 通过 dispatch 方法来处理 Action，Reducer 根据 Action 类型更新 State。Store 可以通过 subscribe 方法添加监听器。
三大原则
Redux 的设计受到了 Flux 架构的启发，但是有一些重要区别。下面是 Redux 设计的三个基本原则：
- 单一状态树：应用程序的所有状态都存储在一个单一对象中。
- 状态只读：不能直接改变状态，需要触发一个 Action。
- 纯函数更新状态：Reducer 是一个纯函数，它可以根据 Action 的类型和可选负载更新 State。
Redux 实践
在 Redux 应用中，React 组件会通过 dispatch 发送一个 action，然后 Reducer 函数会修改状态树，Redux 使用 store 来组织状态，通过 store 来派发更新，更新后渲染组件。
下面是一个使用 Redux 实现 To-Do App 的示例。
Store
------ - ----------- - ---- --------
----- -------- - -----------
----- ------------ - -
------ --
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------- ---------------
--
--------
------ ------
-
-
----- ----- - --------------------------
------ ------- ------Action Creator
----- -------- - -----------
-------- ----------------------- -
------ -
----- ---------
-------- - ----- -------- -
--
-
------ - --------- ------------- --React 组件
------ ---------- ------------- - ---- ------------------
-------- -------------- -
-------------------
----- -------- - -----------------------------
-- ---------------- - -- -
----------------------------------------
--------------------- - ---
-
-
------ ------- -------- ---------- -
----- - ------ -------- - - ---------------------------------
----- ------- - -------------------
----- ----- - ----------- -- ---
------------------ -- -
----- ----------- - ------------------ -- ----------------------------
------ ------------
-- ----
------ -
-----
----------------- -- -
---- -------------------------------
---
----- -----------------------
------ ------------- --
------- -------------------------
-------
------
--
-在上面的示例中，我们首先创建了一个 Store，并将 todosReducer 函数作为参数传入。todosReducer 函数返回了一个新的 State 对象，根据 Action 的类型更新 State。Store 可以通过 getState 方法来获取状态。
我们还创建了一个 ADD_TODO 类型的 action creator，用于向 Store 发送操作指令。我们将该 action creator 导出，方便其他组件调用。
在 React 组件中，我们使用了高阶组件 useEffect 监听 Store 的 update 事件，每次修改渲染 UI。handleClick 函数接受表单数据，调用添加 Action Creator 的方法，并将 todoText 传递给 reducer 处理。
总结
Redux 是一个流行的前端状态管理工具，它有很多强大的特性，是 React 中最佳的存储库之一。本文介绍了 Redux 的核心概念和工作原理，并提供了一个使用 Redux 和 React 实现 To-Do App 的示例。学习 Redux 的过程中，学习一些高级概念和设计模式是必须的，但是纯函数的理解和实现，是入门 Redux 的首要难点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c933605ad90b6d04161e84