Redux 是一种流行的状态管理库，它被广泛应用于 Web 开发中，特别是在 React 应用中。Redux 的核心概念是单一数据源和纯函数，这使得它的应用程序具有可预测性、可测试性和可维护性。然而，当应用程序规模不断增长时，Redux 的状态管理可能变得复杂和难以维护。在本文中，我们将讨论如何构建可扩展的 Redux 架构和应用，以处理大型和复杂的状态管理需求。
1. 分离关注点
一个可扩展的 Redux 应用程序应该具有良好的分离关注点，这意味着不同的功能应该被分离成独立的模块。这有助于减少代码的复杂性和耦合性，使得我们可以更容易地修改和维护应用程序。
1.1. 模块化 Redux
Redux 应该被模块化，这意味着每个模块应该有自己的 reducer、action 和 selector。这样，每个模块都可以独立地处理自己的状态，而不会影响其他模块。
以下是一个模块化的 Redux 示例：
-- -------------------- ---- -------
-- -------
-- -------
----- ------------------ - --------------------------
----- ------------------ - --------------------------
----- ------------------ - --------------------------
-- ------ --------
----- ---------------- - -- -- --
----- -------------------
---
----- ---------------- - ------ -- --
----- -------------------
-------- -----
---
----- ---------------- - ------- -- --
----- -------------------
-------- ------
---
-- -------
----- ------------ - -
----- -----
-------- ------
------ -----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
-------- -----
------ -----
--
---- -------------------
------ -
---------
----- ---------------
-------- ------
--
---- -------------------
------ -
---------
-------- ------
------ ---------------
--
--------
------ ------
-
--
-- ---------
----- ------- - ------- -- -----------
----- --------- - ------- -- --------------
----- -------- - ------- -- ------------
-- ------
------ -
-----------------
-----------------
-----------------
--------
--------
----------
---------
--在这个示例中，我们定义了一个名为 user 的模块，它包含了 reducer、action 和 selector。这个模块可以独立地处理用户相关的状态。
1.2. 模块化业务逻辑
除了 Redux 本身，我们还应该将业务逻辑模块化。这意味着我们应该将所有与业务逻辑相关的代码都放在一个单独的文件夹中，这样我们就可以更容易地修改和测试这些代码。
以下是一个业务逻辑模块化的示例：
-- -------------------- ---- -------
-- -------
-- ----- ---- ---- ---
----- --------- - ----- -------- -- -
----- -------- - ----- ------------------------------
-- -------------- -
----- --- ------------- -- ----- -------
-
----- ---- - ----- ----------------
------ -----
--
-- ------
------ -
----------
--在这个示例中，我们定义了一个名为 user 的业务逻辑模块，它包含了一个名为 fetchUser 的异步函数，用于从 API 中获取用户数据。
2. 使用 Redux 中间件
Redux 中间件是一个强大的工具，它可以用于处理异步操作、日志记录、错误处理等。使用 Redux 中间件可以使我们的应用程序更具可扩展性和可维护性。
2.1. 处理异步操作
在 Redux 中处理异步操作通常需要使用 Redux Thunk 或 Redux Saga 等中间件。这些中间件可以帮助我们编写更简洁和可读的异步代码。
以下是一个使用 Redux Thunk 处理异步操作的示例：
-- -------------------- ---- -------
-- -------
-- -------
----- ------------------ - --------------------------
----- ------------------ - --------------------------
----- ------------------ - --------------------------
-- ------ --------
----- ---------------- - -- -- --
----- -------------------
---
----- ---------------- - ------ -- --
----- -------------------
-------- -----
---
----- ---------------- - ------- -- --
----- -------------------
-------- ------
---
-- ----- ------ -------
----- --------- - -------- -- ----- ---------- -- -
-----------------------------
--- -
----- ---- - ----- -------------------------
---------------------------------
- ----- ------- -
------------------------------------------
-
--
-- ------
------ -
----------
--在这个示例中，我们使用了 Redux Thunk 中间件来处理异步操作。我们定义了一个名为 fetchUser 的异步 action creator，它会在异步操作开始时 dispatch 一个 FETCH_USER_REQUEST action，然后调用 fetchUserFromAPI 函数获取用户数据。如果获取成功，我们会 dispatch 一个 FETCH_USER_SUCCESS action，否则会 dispatch 一个 FETCH_USER_FAILURE action。
2.2. 日志记录和错误处理
除了处理异步操作，Redux 中间件还可以用于日志记录和错误处理。例如，我们可以编写一个中间件来记录每个 action 的发生时间和类型，或者编写一个中间件来捕获所有未处理的错误并记录它们。
以下是一个记录 action 的发生时间和类型的示例中间件：
const loggerMiddleware = (store) => (next) => (action) => {
console.log(`Action @ ${new Date().toISOString()}: ${action.type}`);
return next(action);
};
export default loggerMiddleware;在这个示例中，我们定义了一个名为 loggerMiddleware 的中间件，它会在每个 action 发生时记录它的发生时间和类型。我们可以在应用程序中使用它来调试和分析 action 的执行流程。
3. 使用 Reselect 库
Reselect 是一个用于创建可记忆的 selector 的库，它可以帮助我们避免不必要的计算和重复的代码。使用 Reselect 可以使我们的应用程序更快、更可靠和更易于维护。
以下是一个使用 Reselect 库创建 selector 的示例：
-- -------------------- ---- ------- ------ - -------------- - ---- ----------- -- --------- ----- -------- - ------- -- ------------ ----- --------- - ------- ------ -- ------------- ----- ----------- - --------------- ---------- ----------- ------- ------- -- ----------------- -- ------- --- -------- -- -- ------ ------ - ------------ --
在这个示例中，我们使用了 Reselect 库来创建一个名为 getUserById 的 selector。这个 selector 会根据传入的 userId 参数从 users 数组中获取对应的用户对象。由于 Reselect 可以记忆 selector 的结果，所以我们可以避免重复计算和不必要的渲染。
4. 结论
在本文中，我们讨论了如何构建可扩展的 Redux 架构和应用。我们强调了模块化、使用 Redux 中间件、使用 Reselect 库等最佳实践，以帮助我们处理大型和复杂的状态管理需求。我们希望这些技巧和示例代码可以帮助你构建更好的 Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6746aaefe504cb428ebce1f0