Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助我们更好地管理数据。然而，Redux 数据处理的方式可能会给一些人带来困惑。在本文中，我们将探讨 Redux 数据处理的几种技巧，帮助您更好地利用 Redux 来管理应用程序的状态。
1. 单一数据源
在 Redux 中，所有的状态都存储在单一的数据源中。这个数据源是一个 JavaScript 对象，它被称为“ Store”。这个 Store 中的所有数据都是不可变的，意味着任何时候都不能直接修改这些数据。相反，我们需要通过派发“ Action”来告诉 Redux 我们想要做什么。每个 Action 都会描述一个事件，它会触发 Store 中的状态更改。
这种单一数据源的方法让状态变得可预测，使得在多个组件之间共享数据变得更加容易。它也可以避免一些常见的状态问题，例如状态不一致。当所有的状态都存储在同一个位置时，我们就可以轻松跟踪应用程序的整个状态。
-- ----- ---
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------------ - ------------- ------- -
------------------- -
---- ------------
------ -
------ ----------- - --
--
---- ------------
------ -
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - --------------------------在上面的示例中，我们创建了一个名为“ countReducer” 的 Redux reducer 函数，用于处理名为“ INCREMENT” 和“ DECREMENT”的 Dispatch Action。在 Store 初始化时，我们将它传递给 createStore 函数，它将返回一个新的 Store 对象。这个对象包含了当前的状态以及一些方法，用于 Dispatch Action 和订阅更改。
2. 分离应用程序状态
在一个大型的应用程序中，有许多不同类型的状态需要管理。Redux 让我们更好地管理这些状态，但是我们需要确保每个状态都能被有效地分离。
Redux 推荐使用分离的 reducer 函数，每个 reducer 函数都会处理一个特定的状态片段。这种分离的方式使得我们可以更好地分离应用程序状态，并确保状态的更新不会相互干扰。这也为我们提供了一种组织代码的方式。
-- ----- ---
------ - ------------ --------------- - ---- --------
----- ---------------- - -
----- ---
------ ---
--
-------- ----------------- - ----------------- ------- -
------------------- -
---- -----------
------ -
---------
----- ---------------
--
---- ------------
------ -
---------
------ ---------------
--
--------
------ ------
-
-
----- ----------------- - -
------ --
--
-------- ------------------ - ------------------ ------- -
------------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
----- ----------- - -----------------
----- ------------
------ -------------
---
----- ----- - -------------------------在这个代码示例中，我们使用 combineReducers 函数，将 userReducer 和 countReducer 组合起来，然后将它们传递给 createStore 函数。这个组合后的 reducer 函数可以管理 Store 中不同的状态，每个状态都有一个特定的 reducer 函数。这种分离方式可以让我们轻松分离一系列状态，并确保状态的更新可以独立进行。
3. 描述性的 Action
Redux 中的 Action 是一个纯 JavaScript 对象，它描述了一个事件，它会触发状态的更改。描述性的 Action 可以使代码更加易于维护和扩展。
我们建议您在编写 Action 时尝试使用字符串常量，避免使用硬编码字符串。这样可以减少因为手写错误而导致程序出错的机会。在编写 reducer 函数时，也可以使用这些字符串常量，以确保逻辑正确性。
-- ----- ---
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
----- --------- - ------------
----- --------- - ------------
-------- ------------------ - ------------- ------- -
------------------- -
---- ----------
------ -
------ ----------- - --
--
---- ----------
------ -
------ ----------- - --
--
--------
------ ------
-
-
----- ----- - --------------------------
-- -------- ------ -- ------ ----
-------- ----------- -
------ -
----- ----------
--
-
-------- ----------- -
------ -
----- ----------
--
-
---------------------------- -- ---------
---------------------------- -- ---------在这个示例中，我们将字符串常量存储在变量中，然后在 reducer 函数中使用它们。我们还编写了两个 Action 创建函数，用于创建具有描述性的 Action。这些函数返回 Action 对象，直接使用它们可以确保类型和有效负载正确。
4. 中间件
Redux 中的中间件可以让我们在 Action 发送到 reducer 函数之前或之后执行额外的逻辑，例如异步操作、日志记录和错误处理。这可以让我们更好地组织我们的代码，并提高代码的可读性和可维护性。
Redux 提供了一个非常重要的中间件，它就是 Redux Thunk。这个中间件可以让我们编写异步 Action 创建函数，这些函数可以根据需要发起异步请求，并在请求完成时 Dispatch 新的 Action。
-- ----- ---
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
-------- ------
----- ---
------ -----
--
----- ------------ - ---------------
----- ------------ - ---------------
----- ----------- - --------------
-------- ----------------- - ------------- ------- -
------------------- -
---- -------------
------ -
---------
-------- -----
--
---- -------------
------ -
---------
-------- ------
----- ---------------
--
---- ------------
------ -
---------
-------- ------
------ -------------
--
--------
------ ------
-
-
-------- ----------- -
------ ------------------ -
------------------------
------ ---------------------------------
-------------- -- ----------------
---------- -- -
----------------------------
--
------------ -- -
----------------------------
---
--
-
-------- ------------- -
------ -
----- -------------
--
-
-------- ----------------- -
------ -
----- -------------
-------- -----
--
-
-------- ----------------- -
------ -
----- ------------
------
--
-
----- ----- - ------------------------ ----------------------------------
----------------------------在这个示例中，我们编写了一个异步 Action 创建函数，名为 fetchData。它可以在网络请求完成时 Dispatch 新的 Action，以更新 Store 中的数据。我们使用了 applyMiddleware 函数，将 thunkMiddleware 作为参数传递给 createStore 函数。这样，我们就可以在 fetchData 函数中使用 dispatch 函数，异步派发多个 Action。
结论
我们已经了解了 Redux 中的一些常用技巧。这些技巧可以提高应用程序的可维护性和可读性。我们深入学习了单一数据源、分离应用程序状态、描述性的 Action 和中间件。
在开始使用这些技巧之前，你需要对 Redux 有一个基本的了解。如果您还不熟悉 Redux，可以查阅 Redux 的官方文档。这些技巧只是 Redux 中的一些实践，您可以根据自己的需求进行调整，以适合特定的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673695e80bc820c582552708