什么是 Redux？
Redux 是一个流行的状态管理库，它使得应用状态的管理更加容易和可预测。它是一个单向数据流的模式，其中状态存储在一个单一的存储库中，被称为 Store。操作此存储库的数据必须是纯函数，它们接受先前的状态和操作，然后生成新的状态。
Redux 在 React 应用程序中广泛使用，但它也可以用于任何框架或库。Redux 有助于分离状态管理逻辑和业务逻辑，使得应用程序更容易测试和维护。
Redux 基本概念
在使用 Redux 之前，先了解以下重要的概念：
1. Store
Redux 应用程序的核心是 Store。它是一个对象，包含整个应用程序的状态，它在您的应用程序中存储数据和状态。然后您可以从 Store 中获取数据或将数据放入其中。
2. Action
Action 是一种描述发生的事件的对象。它们被发出到 Store，并由 Reducers 处理。每个操作必须有一个 type 属性，它唯一标识这个操作是什么。
3. Reducer
Reducers 是纯函数，它们接受先前的状态和操作，然后生成新的状态。Reducer 是 Redux 的核心功能之一，因为它们管理整个应用程序的状态。Reducer 可以接受一个当前状态、操作对象，生成并返回一个新的状态。
4. Dispatch
由于目前为止，我们已经描述了一系列的“东西”，现在我们来描述一个动词。Dispatch 是一个函数，它用于将操作从应用程序发送到 Store。它是您在应用程序中调用操作的方式。
5. Middleware
Middleware 是 Redux 中处理各种异步的、副作用的、以及异常处理的一种机制，是对 Dispatch 的增强或直接中间件。可以用于在发出 Action 和最终到达 Reducer 之间执行其他操作，如记录、分析和错误处理。
Redux 的工作流程
当你发出一个 Action 时，它被发送到 Store，然后传递给 Reducer。Reducer 根据 Action 类型以及跟踪的先前状态更新 Store 中的状态。Store 的数据更新激发 React 应用程序的组件重新渲染。
Redux 的正确用法
根据需要分割状态
将应用程序状态分解为几个单独的状态有助于更好地管理代码。这使得状态变得更加容易控制，减少了状态变化的复杂性。如果你的应用程序有多个状态类型，你可以将它们放在一个名为 reducers 的文件夹中，以便你可以更好地组织和维护代码。
根据业务逻辑处理数据
业务逻辑和状态管理理应是分离的内容。因此，为了更好地管理您的代码，必须保持清晰的分离逻辑。如果你需要在一个 Action 中执行多个操作，你可以将它们合并为一个 Action，然后创建 Reducer 执行这个 Action。
记录日志
使用 Middleware 记录操作日志可以大大增加代码的可读性和可维护性。在生产环境中，这有助于分析运行时错误。您可以使用 Redux 中的 Redux-Logger 包来记录操作日志。
以下是一个例子，标记了一个简单的 Action 执行纪录:
const logMiddleware = storeAPI => next => action => {
console.log(action.type, storeAPI.getState());
// 此处上报日志等。。。
return next(action);
}浅拷贝
由于 Reducer 的操作结果应该是一个全新的、只读的对象，尽可能地使用浅复制是一个好主意。浅拷贝是 CPU 和内存效率的解决方案。React-Immutable 包提供了很好的实现。
以下是一个例子，展示如何更改对象属性的值：
const updateObject = (oldObject, newValues) => Object.assign({}, oldObject, newValues);使用 combineReducers()
使用 Redux 的 combineReducers() 模式可以将多个 Reducer 组合成一个大的 Reducer，以便更好地管理状态。这允许你将主要的 Reducer 拆分为更小的 Reducer，以便构建一个更具规模的应用程序。
以下是一个例子，展示 Reducer 以及如何使用 combineReducers()：
-- -------------------- ---- -------
-- ----
----- ----------- - -----------------
----- ------------
----- ------------
--------- ---------------
---
-- -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- --------------
------ -
---------
----------------- ------------
--
--------
------ ------
-
--
-- ------
----- ---------- - ---- -- -
------ ------ -------------- -----
--使用 React-Redux 将应用链接起来
React-Redux 库将 Redux 应用程序和 React 应用程序链接起来，使得状态管理变得更加容易。它使用 Provider 组件，将 Store 传递到 React 组件中，使得组件具备访问应用程序状态的能力。
以下是一个例子，展示如何使用 React-Redux 来管理状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
------ -------------------- ---- --------
------ - -- ----------- ---- -------------------------
------ --------- ---- -------------
------ -------- ---- -------------
----- --------- ------- --------------- -
------------------ -
-------------
-
-------- -
----- ------- - -----------
------ -
-----
--------------
--------- ---------------
------
--
-
-
------------------- - -
------ ---------------------------
-------- ---------------------------
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
-------- ------------------------------- ---------
---
------ ------- ------------------------ -------------------------------结论
通过使用 Redux，您可以更有效地管理和处理应用程序状态。使用 Redux 的正确方式很重要，因为错误的使用将使您的应用程序更加维护困难。Redux 的组件化帮助您在应用程序代码中实现所有逻辑，并使其更易于测试和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67396e02317fbffedf16bdeb