什么是 Redux？
Redux 是一种 JavaScript 状态管理库，它可以使我们更好地处理应用程序的状态。Redux 可以让我们更好地组织代码，使我们的应用程序更容易测试、调试和扩展。
Redux 的设计思路
Redux 的设计价值在于它的简单性。它的开发者 Dan Abramov 相信，简单的架构设计可以有助于提高应用程序的可维护性，降低代码技术债务，达到可扩展和稳定的目标。Redux 遵循了一些设计模式和原则：
单一状态树：Redux 状态就像使用全局变量一样。我们将所有的应用程序状态都存储在一个单一的数据结构中，称为状态树。这个状态树是一个 JavaScript 对象，它反映了整个应用程序的状态。
状态只读：Redux 的状态只能通过执行动作（Action）来修改。我们要求在组件中只会发起动作，但不直接改变状态树。动作是一种包含信息的普通对象，这些信息描述了应用程序中发生了什么。
状态改变纯函数：状态的状态转换逻辑由纯函数实现。纯函数输入只有旧状态和动作，输出是新的状态。在 Redux 中，这两个参数分别是
state和action。操作 / 行为分离：与状态分离的便是操作。操作是一个函数，它的工作是执行状态的转换，只不过它被封装成了一层中间件。
Redux 的核心概念
Action
Action 是一个描述发生了什么的普通对象。Action 包含一个“type”字段和一些额外的数据，表示状态转换的意图。
{
type: 'INCREMENT',
payload: 1
}Reducer
Reducer 是一个纯函数，用来处理状态转换。它接收当前的状态以及一个动作，并返回新的状态。
-- -------------------- ---- -------
-------- -------------- ------- -
------ ------------- -
---- ------------
------ ----- - ---------------
---- ------------
------ ----- - ---------------
--------
------ ------
-
-Store
Store 是应用程序的状态容器。它包装了 Reducer 并提供了几种方法来读取和更新状态。Store 中的状态只能通过派发 Action 来改变。
import { createStore } from 'redux';
const store = createStore(reducer);Redux 中的状态设计和管理
在 Redux 中，我们们将应用程序的状态定义为一个 JavaScript 对象，并存储在一个单一的状态树中。这个状态树是唯一的纯函数，使我们可以轻松地追踪和清晰地管理状态的变化。
Redux 中的状态主要分为两类：持久化状态和 UI 状态。
持久化状态
持久化状态是指应用程序中需要跨会话或平台保持的数据，例如用户身份验证信息或应用程序的配置信息。由于持久化状态需要持久存储并在应用程序重新加载时重新加载，因此通常使用存储解决方案（如 LocalStorage 或 IndexDB）进行保存。
const initialState = {
isAuthenticated: false,
userId: null
};UI 状态
UI 状态是指应用程序中会更改并驱动界面更改的实时数据。这些状态通常管理离散控件状态，例如按钮激活状态或表单中的输入框值。UI 状态应该始终根据用户输入和行为的实时反馈来更新。
const initialState = {
isFormValid: false,
username: null,
password: null
};嵌套状态
在 Redux 中，我们可以使用树形结构来组织更复杂的状态。嵌套状态可以更好地反映应用程序界面的嵌套层次结构，并为其它状态提供上下文。
-- -------------------- ---- -------
----- ------------ - -
-------- -
------- -----
--
------ -
------- ------
-------- ----
-
--Redux 的最佳实践
使用修改器函数更新状态
在 Redux 中，我们应该始终避免直接改变状态，并使用修改器函数来处理状态的变化。修改器函数可以确保状态属性始终具有预期的值，并且存储在状态树中的所有属性为不可变的对象。
-- -------------------- ---- -------
-- ---
------------------ - -----
-- ----
------ -
---------
------ -
---------------
------- ----
-
--划分好 Action
在设计 Action 时，我们应该尽量将相同目的的实现放在一起。这有助于拆分 Reducer 函数，并利于组件更新的判断。
-- -------------------- ---- -------
-- ---
-
----- --------------------
-------- -
----- -----------
------ ------
-
-
-- ----
-
----- ------------------
-------- ------
-避免使用嵌套状态
虽然 Redux 支持嵌套状态树的处理，但是深层嵌套可能降低应用程序的性能。在记录我们的状态时，我们应该尽量扁平化我们的数据。
-- -------------------- ---- -------
-- ---
----- ------------ - -
--------- -
---- -
- --- -- ----- ------ ------- --
- --- -- ----- ---- --- --- ------- --
--
----- -
-- - --- -- ----- ------ ------- --
-- - --- -- ----- ---- --- --- ------- --
--
--
--
-- ----
----- ------------ - -
--------- -
- --- -- ----- ------ ------- --
- --- -- ----- ---- --- --- ------- --
--
--结论
Redux 可以帮助我们更好地管理应用程序状态，使我们的代码更加可维护、可扩展和可测。我们应该遵循 Redux 的最佳实践来设计我们的状态树，并始终使用修改器函数来更新状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6731c7220bc820c5823a5992