Redux 是一个非常流行的状态管理库，它提供了一种可预测的方式来管理应用程序的状态。但是，使用 Redux 也可能会导致代码变得笨重、难以维护。为了最大限度地减少 Redux 应用的复杂度，我们可以采用以下基于解耦、组合和标准化的构建方式。
解耦
在 Redux 应用程序中，Reducer 和 Action 是非常紧密耦合的。这意味着一旦一个 Action 或一个 Reducer 改变，可能会影响整个应用程序的状态。为了解耦这些组件，我们可以采用以下措施。
使用 Reducer 組合子
Reducer 组合是一种结构化的方式，用于将多个 Reducer 组合成一个单一的 Reducer。这种技术可以使你轻松管理复杂的状态，并且使你不必在每一次修改状态时都要改动所有 Reducer。
例如，下面是一个简单的 Redux 应用程序，由两个 Reducer 组成：counter 和 auth。
-- -------------------- ---- ------- -- --------------------- ------ - --------------- - ---- -------- ------ -------------- ---- ------------ ------ ----------- ---- --------- ----- ----------- - ----------------- -------- --------------- ----- ------------ --- ------ ------- ------------
将 Action 和 Reducer 分开存放
将 Action 和 Reducer 分开存放可以使代码更加易于维护和更新。要实现这一点，可以为每个组件创建独立的文件夹，然后将其相关的 Action 和 Reducer 存放在该文件夹中。
例如，下面是一个简单的 Counter 组件的结构：
|- src
|- components
|- Counter
|- index.js
|- actions.js
|- reducer.js组合
在 Redux 应用程序中，组合是一种重要的技术，它允许我们将多个组件组合成一个完整的应用程序。以下是实现这一点的一些最佳实践。
使用中间件
中间件是 Redux 提供的一种重要机制，它可以在 action 发送到 reducer 之前拦截它们。这使得在动作到达 Reducer 之前，能够处理它们。使用中间件可以让你在不改变 Redux 基础结构的情况下，对应用程序进行增强。
例如，下面是一个 redux-logger 中间件，可以用于记录每个 action 和 redux state 的变化。
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(logger),
);使用 Reselect 库
Reselect 库是一个用于创建 memoized selector 的库，它可以使组件只在数据发生变化时才重新渲染。这可以极大地提高应用程序的性能。
Re-Selector 库使你可以提供当前的状态和一个函数，从而返回合成的数据。在使用它时，只有在您的数据实际上改变时，它才会重新计算。这意味着你可以避免组件多次渲染，显着提高性能。
例如，下面是一个使用 Reselect 库的示例：
-- -------------------- ---- -------
------ - -------------- - ---- ----------
----- -------- - ----- -- -----------
----- --------------- - ---------------
---------- ------- ------ -- --------------
------- ------- -- -
-- ------- --- ------ -
------ -----
-
------ ----------------- -- -
-- ------- --- ------------ -
------ --------------
-
-- ------- --- --------- -
------ ---------------
-
------ ----
--
-
-标准化
在 Redux 应用程序中，标准化是一种重要的技术，它使我们能够使用更清晰、更干净的代码来管理复杂的应用程序状态。以下是实现这一点的一些最佳实践。
使用 Normalizr 库
使用 Normalizr 库可以使我们对 Redux store 中存储的数据结构进行规范化。这可以帮助我们组织数据，使其更加易于处理和更新。Normalizr 的目标是将 JSON 数据的嵌套结构转换为基于 ID 的对象和数组。
例如，下面是一个使用 Normalizr 库的示例：
-- -------------------- ---- -------
------ - ------ - ---- ------------
----- ---------- - --- -----------------------
----- ------------------ - --- ------------------------------ -
------------- -------------
---
------ ----- ------------- - ------ -- -
----- -------------- - --------------- ----------------------
------ -
---------------------------
-------------- ----------------------
--
--使用 Immutable.js 库
Immutable.js 是一个用于 JavaScript 应用程序的持久数据结构库。它提供了多种数据结构，包括 List、Map、Set、Record、OrderedMap、OrderedSet 和 Stack。这些数据结构是 immutable 和可持久化的，因此对它们的修改会返回一个新的数据结构，而不会修改原始数据结构。
使用 Immutable.js 可以确保应用程序状态始终是不可变的，并且可以更容易地管理和处理它。
例如，下面是一个使用 Immutable.js 库的示例：
-- -------------------- ---- -------
------ - --- - ---- ------------
----- ------------ - -----
-------- --
---
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -------------------- -------------------- - ---
---- ------------
------ -------------------- -------------------- - ---
--------
------ ------
-
-总结
减少 Redux 应用的复杂度是非常重要的，因为这可以使代码更加易于维护和更新。要实现这一点，我们可以采用基于解耦、组合和标准化的构建方式。这些技术可以使我们更轻松地管理复杂的应用程序状态，并使用更清晰、更干净的代码编写应用程序。
通过示例代码和最佳实践，您应该能够开始减少 Redux 应用的复杂度了。如果您能够采用这些技术，您不仅将能够更快地编写代码，还将更易于维护和更新应用程序状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65037bb295b1f8cacd058ecc