Redux 是一种在 JavaScript 应用程序中管理应用程序状态的库。Redux 引入了一个全局状态存储来管理应用程序的状态，它并不是一个框架或库，也不依赖任何框架或库，可以与 React、Angular、Vue 等框架一起使用。它可以让你更好地管理和维护应用程序状态，从而避免难以调试的错误。
在 Redux 中，有一些生命周期阶段，可以帮助我们更好地了解 Redux 是如何工作的以及如何使用 Redux 来构建我们的应用程序。
Redux 生命周期概述
Redux 生命周期可以简单地分为四个阶段：
- 组件的初始化
- Action 的派发（Dispatch）
- Reducer 的处理
- 更改状态 Store 的订阅
以下是每个阶段的详细解释。
组件的初始化
在 Redux 中，组件初始化的第一步是创建 Store。创建一个 Store 对象，它是一个包含整个应用程序状态的对象。可以通过 createStore 函数来创建一个 Store 对象。
Store 对象是被许多操作所影响的。这些操作将产生 Action 对象，然后将它们派发给 Store 对象，以改变状态。
Action 的派发
要通过应用程序中的组件更改状态，需要派发一个 Action。Action 是一个纯 JavaScript 对象，用于描述应用程序中的事件。例如，在 Todo 应用程序中添加新任务的 Action 可以是这样的：
{
type: 'ADD_TODO',
payload: 'Buy milk'
}可以使用 dispatch 方法派发一个 Action：
store.dispatch({
type: 'ADD_TODO',
payload: 'Buy milk'
});Reducer 的处理
Store 对象接收到 Action 对象后，它将使用 Reducer 函数来处理它。Reducer 函数是一个纯函数，它接收两个参数：先前的状态和一个 Action 对象。Reducer 函数根据 Action 对象的类型更改状态，回传一个新的状态对象。
例如，上面的 ADD_TODO Action 的 Reducer 函数可能是这样的：
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}更改状态 Store 的订阅
Redux 中的 Store 对象是可观察的，并且 Store 的每个更改将触发订阅回调。可以使用 subscribe 方法来订阅状态更改：
store.subscribe(() => {
console.log(store.getState());
});在上面的示例中，每次状态存储更改时，我们都会将其打印到控制台。
Redux 生命周期的实际应用
以下是 Redux 生命周期的实际应用实例。
创建 Store 对象
import { createStore } from 'redux';
import rootReducer from './reducers';
const initialState = {};
const store = createStore(rootReducer, initialState);在上面的示例中，我们通过 createStore 函数创建了一个 Store 对象。rootReducer 是一个组合的 Reducer 函数，它将我们的状态分解成多个子状态（例如，todos，visibilityFilter ）。
派发 Action
store.dispatch({
type: 'ADD_TODO',
payload: 'Buy milk'
});在上面的示例中，我们通过 dispatch 方法派发了一个 ADD_TODO Action。
处理 Reducer
-- -------------------- ---- -------
-------- ------------------ - --- ------- -
------ ------------- -
---- -----------
------ ---------- ----------------
--------
------ ------
-
-
-------- ----------------------- - ------ ------- -
------ ------------- -
---- -------------
------ ---------------
--------
------ ------
-
-
----- ----------- - -----------------
------ -------------
----------------- -----------------
---在上面的示例中，我们定义了两个子 Reducer：todosReducer 和 visibilityReducer。将这些 Reducer 组合成一个根 Reducer，可以将根 Reducer 传递给 createStore 函数，以创建 Store 对象。
订阅状态更改
store.subscribe(() => {
console.log(store.getState());
});在上面的示例中，我们通过 subscribe 方法订阅，可以在控制台中查看状态更改的输出。
结论
Redux 的工作原理相对简单，它的生命周期仅包括四个阶段：组件的初始化、Action 的派发、Reducer 的处理和状态更改 Store 的订阅。然而，Redux 不仅是典型的全局状态管理器，它也是一种称之为 FLUX 的设计模式，可以让我们更易于理解和管理应用程序状态。掌握 Redux 的生命周期可以帮助前端开发者更好地构建可缩放的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7ddc1c5c563ced5afaa4b