一、Redux 简介
Redux 是一种基于 JavaScript 应用的可预测状态管理器，广泛应用于 React 应用的前端开发中。通过一个存储在单一状态树中的全局状态来管理这个应用，Redux 让状态变化变得容易，同时也方便了调试和开发。
在 Redux 中，应用的状态通过一个纯函数来进行管理，这个函数被称为“reducer”。reducer 接收先前的状态和 action 两个参数，然后返回新的应用状态。
Redux 关注的是状态的变更，使得应用可以更加容易地跟踪每个变化以及所有变化的来源。它还具有记录状态历史的能力，这使得应用可以更加容易地实现撤销和重做等复杂功能。
二、Redux 的核心概念
- Store
Store 用于保存应用的状态。通常情况下，你只需要创建一个 store。在 Redux 中，可以通过 createStore() 方法来创建一个 store。
import { createStore } from 'redux';
const store = createStore(reducer);- Action
Action 是代表状态变化的纯 JavaScript 对象。它包含一个 type 属性和一些其他必要的属性，可以携带任何类型的数据。
const increase = { type: 'INCREMENT', amount: 1 };- Reducer
Reducer 是处理应用各种状态变化的函数。它接收当前应用状态和一个 action，修改后返回一个新的应用状态。
-- -------------------- ---- -------
----- ------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --------------
---- ------------
------ ----- - --------------
--------
------ ------
-
-- Dispatch
Dispatch 是执行 action 的函数。它会接收 action 对象或者一个由 action 构成的函数，并将它们传递给 reducer。一般情况下，你不需要直接调用 dispatch，而是通过调用“action creator”函数来触发它。
store.dispatch(increase);
- Subscription
Subscription 是一个回调函数列表，它会在每次 dispatch 调用后被执行。
const unsubscribe = store.subscribe(() => console.log(store.getState()));
三、Redux 的使用指导
在应用 Redux 的过程中，应该遵循以下几个原则：
- Single source of truth
Redux 的核心思想是将应用状态保存在单一的状态树中。这使得整个应用的状态变得非常可预测，同时也可以让你更好地理解应用的状态。
- State is read-only
Redux 中的状态是不可变的。你不能直接修改它，而是需要触发一个 action，让 reducer 来处理它。这种设计使得状态变化变得更为可控，且易于调试。
- Changes are made with pure functions
Redux 中的 reducer 一定是纯函数。这意味着它不能有任何可观察的副作用，并且在输入相同时，总是输出相同的结果。这种设计使得重构和测试变得非常容易。
- Use action creators
Action creators 是一个函数，用来生成 action。它们可以将 action 操作的具体实现细节进行封装，使得代码更为模块化，且易于重用。这种设计使得应用的代码变得更加优雅和简洁。
四、Redux 示例代码
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- -------- - - ----- ------------ ------- - --
----- -------- - - ----- ------------ ------- - --
----- ------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --------------
---- ------------
------ ----- - --------------
--------
------ ------
-
--
----- ----- - ---------------------
------------------ -- -------------------------------
-------------------------
-------------------------
-------------------------这段代码展示了一个简单的 Redux 应用，它只有一个数字状态，并可以通过 action 增加或减少这个数字的值。
五、总结
通过深入浅出地讲解 Redux 的核心概念和使用指导，我们可以更好地理解和掌握 Redux 技术。Redux 的设计思想非常有价值，它可以使得应用的状态管理变得清晰和可预测，同时也提高了我们的开发效率。希望本文对大家了解 Redux 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64635b6f968c7c53b0462e5a