Redux 是一种 JavaScript 状态管理库，用于管理应用程序中的数据流。它能够集中管理应用程序的状态，使组件和状态之间的关系更加清晰和可理解。在使用 Redux 进行状态管理时，需要遵循以下原则。
1. 单一的状态树
Redux 应用程序的整个状态存储在单一的状态树中。这个状态树是一个简单的 JavaScript 对象，储存了应用程序的所有数据。这有助于开发人员快速了解应用程序的状态，并使得状态的修改更加简单和直观。
-- -------------------- ---- -------
----- ------------ - -
----- -
----- -------
---- --
--
----- -
------ --
-
--在这个示例中，我们创建了一个具有两个部分的初始状态：用户和购物车。用户部分包含一个名为 "John" 的用户和他的年龄。购物车部分是一个空数组。
2. 只读的状态
Redux 的状态是只读的。这意味着应用程序的状态只能通过派发动作来修改。在应用程序中，Redux 为我们提供了一个用于派发动作的 API，我们不能直接修改状态。
store.dispatch({ type: 'ADD_ITEM', payload: { id: 1, name: 'item' } });在这个示例中，我们使用 Redux 的 dispatch API 派发了一个 ADD_ITEM 动作，这个动作将一个新 item 添加到应用程序的状态中。
3. 纯函数
Redux 的状态修改必须通过纯函数完成。纯函数是指在同样的输入下总是产生同样的输出，并且不产生副作用的函数。Redux 通过纯函数来实现状态的更新。此外，Redux 还要求我们不要在纯函数中修改参数或全局变量，这可以防止状态在消费者之间共享。
-- -------------------- ---- -------
-------- ------------------ ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ---------------
--
---- --------------
------ -
---------
------ ----------------------- -- ------- --- ---------------
--
--------
------ ------
-
-在这个示例中，我们定义了一个纯函数，将应用程序的状态修改为添加或删除购物车中的内容。我们使用 JavaScript 中的运算符 ... 来创建状态的浅拷贝，这可以防止我们突变原始状态。
4. 使用 action types 和 action creators
为了避免错误和提高可读性，Redux 应用程序中的每一个动作都应该有一个类型，并且应该使用/action 等大写字符来表示类型。此外，使用函数来包装每个动作类型是一个好习惯，这些函数被称为动作创建者。
-- -------------------- ---- ------- ----- -------- - ----------- ----- ----------- - -------------- -------- ------------- - ------ - ----- -------- - -------- ---- -- - -------- -------------- - ------ - ----- ------------ -------- -- -- -
在这个示例中，我们定义了两个动作类型 ADD_ITEM 和 REMOVE_ITEM，以及两个动作创建者函数 addItem 和 removeItem。动作创建者函数将创建一个对象，指定一个动作类型和一个负载。
5. 中间件
Redux 中间件提供了一种向 store 添加额外功能的机制。中间件可以通过拦截或转换动作来实现各种任务。Redux 社区中有许多强大的中间件，可以用于异步数据获取、日志记录等任务。
-- -------------------- ---- ------- ----- ------ - ----- -- ---- -- ------ -- - --------------------------- --------------------------- -------- --- ------ - ------------- ----------------- ------- ------------------ ------------------- ------ ------- -- ----- ----- - ------------------------ -------------------------
在这个示例中，我们创建了一个简单的 log 中间件来跟踪应用程序中的动作和状态。中间件采用了复合函数的形式，并且改变了派发操作和 store 的行为。
结论
Redux 提供了一种可靠的状态管理方案，但如果使用不当，它会给开发人员带来一些限制和额外的复杂度。因此，在使用 Redux 进行状态管理时，我们需要遵循上述原则，这将有助于我们创建可维护和可扩展的应用程序。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa8c0144713626014d6b14