引言
Redux 是一个流行的 JavaScript 应用程序状态管理工具。它允许我们使用单一数据存储来管理应用程序的状态，从而实现可读可测试的代码。在这篇文章中，我们将学习如何使用 Redux 创建一个可以轻松读取和测试的前端应用程序。
什么是 Redux？
Redux 是一种应用程序状态管理工具，它允许我们使用单一数据存储来管理应用程序的状态。Redux 假定所有应用程序状态都存储在一个名为“store”的单一对象中，并使用一个称为“action”的简单对象来描述状态的变化。Actions 通过调用“reducer”函数来修改 store 中的数据。
Redux 工作原理
Redux 将应用程序状态存储在名为“store”的单一对象中。store 是一个纯函数，它对外界是完全可见的，并且只能通过调用一系列“action”来修改状态。当调用 action 时，Redux 将自动调用 store 中的相关 reducer 函数，并将当前状态作为参数传递给 reducer。
Reducer 函数接收 action 和当前状态作为参数，并返回新的状态。Reducer 函数必须是纯函数，即它必须具有相同的输入和相同的输出，无论何时执行。这使得 reducer 函数易于测试和理解，并且可以更好地管理复杂的应用程序状态。
Redux 的核心概念
Redux 有三个核心概念：store、action 和 reducer。
Store
store 是应用程序的单一状态存储区。它包含应用程序的所有状态，并使用 reducer 函数来管理它们。在读取 store 数据时，我们使用“selector”函数来获取所需的数据。
Action
action 是一个简单的 JavaScript 对象，它描述了对 store 状态的更改。它必须包含必需的 type 字段以及任何其他必要的数据。例如，如果我们要更改用户的名称，我们将创建一个 action，其中 type 字段为“UPDATE_USER_NAME”，并将新名称存储在数据字段中。
Reducer
reducer 是一个纯函数，它接收当前状态和 action 作为参数，并返回新的状态。它的作用是根据传递的 action 来更新应用程序的状态。为了实现可读可测试的代码，我们的 reducer 必须符合以下几个条件：
- 它必须是纯函数；
- 它必须仅处理当前状态和 action，而不改变状态；
- 它必须返回新的状态。
如何使用 Redux 创建可读可测试的前端应用程序
使用 Redux 创建可读可测试的应用程序需要遵循一些最佳实践。下面是一些要点：
拆分 reducer
应用程序状态可能非常庞大。为了使 reducer 更加可读和易于测试，我们应该将其拆分成更小的函数，并使用 Redux 提供的 combineReducers() 函数将它们组合起来。
例如，我们要创建一个电子商务应用程序，其中包括订单和产品信息。我们可以为订单和产品状态创建两个 reducer 函数，并使用 combineReducers() 函数将它们组合起来。
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ ------------- ---- ------------------ ------ --------------- ---- -------------------- ----- ----------- - ----------------- ------- -------------- --------- ---------------- --- ------ ------- ------------
使用 Redux 工具函数
Redux 提供了一些实用工具函数，可以大大简化代码并使其更易于测试。下面是一些常用的工具函数：
- bindActionCreators：将 action creator 转换为可通过 dispatch 调用的函数。
- createSelector：创建可缓存的计算状态函数。这些函数接收 store 中的数据，并返回从这些数据派生的值。当 store 中的数据发生更改时，可以跳过计算这些值，并返回缓存值。
- createSlice：创建可读可测试的 reducer。createSlice() 接收一个包含 reducer 初始化状态和 reducer 更新操作的对象，并返回一个可直接使用的 reducer 函数。
编写可测试的代码
为了确保代码可读可测试，我们应该遵循一些最佳实践。
- 我们应该书写纯函数，以便代码可以轻松地转换为测试用例。
- 我们应该遵循单一职责原则，并尽可能避免对状态进行直接操作。相反，我们应该使用 reducer 函数管理状态的更改。
- 我们应该仔细考虑各种情况，并编写处理错误的代码。
下面是一个示例代码，它演示了如何使用 Redux 创建可读可测试的前端应用程序：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - ----------- - ---- -------------------
----- ------------ - -
--------- ---
----- ---
--
----- ------------- - -------------
----- -----------
------------- ----------------------
--------- -
----------------- - ------- -- -
----------------- - --------
--
-------------------- - ------- -- -
------ ------------------
--
--
---
----- --------- - -------------
----- -------
------------- ------------------
--------- -
---------------- - ------- -- -
----------------- - ----------------- -- -
-----------
--------- --
--
-------------------------- -- --
--
--------------------- - ------- -- -
----- ------- - ------------------
-- -------- -- ---------------- - -- -
---------------- -- --
-- ----------------- --- -- -
------ ------------------
-
-
--
--
---
----- ----------- - -----------------
--------- ----------------------
----- ------------------
---
------ ----- - ----------- ------------- - - ----------------------
------ ----- - ---------- -------------- - - ------------------
------ ------- ------------在上面的代码中，我们创建了两个可读可测试的 reducer。这些 reducer 仅处理单一的 store 字段：products（产品信息）和 cart（购物车）。我们使用 createSlice() 工具函数简化 reducer 创建和管理。这些 reducer 遵循最佳实践，它们只能访问当前状态和 action 对象，并返回新的状态。
结论
Redux 是一个强大的状态管理工具，可以大大提高应用程序的可读性和可测试性。在本文中，我们学习了如何使用 Redux 创建可读可测试的前端应用程序，并遵循了一些最佳实践。如果你一开始对 Redux 感到困惑，不要担心。只要你坚持练习并实践，你会变得熟练并创建出更好的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f2b826a44b36ee57674f6a