介绍
Redux 是一个 JavaScript 应用程序的状态容器，它提供了一种可预测的状态管理机制，使得应用程序的状态变化变得可控和可追踪。Redux 的设计思路和实现原理都非常精妙，本文将对其进行详细介绍。
设计思路
Redux 的设计思路可以概括为三个核心概念：
- Store：状态容器，保存着应用程序的所有状态。
- Action：状态变化的描述，是一个包含 type 属性的对象。
- Reducer：状态变化的处理函数，接收当前状态和 action，返回新的状态。
这三个概念的关系如下图所示：
当应用程序中的某个组件需要修改状态时，它会创建一个 action 对象并将其派发到 store 中，store 会将这个 action 对象传递给 reducer 处理，reducer 根据 action 中的 type 属性来判断需要进行哪种状态变化，并返回新的状态。最后，store 将新的状态保存起来，并通知所有订阅者，让它们可以更新自己的状态。
Redux 的设计思路非常简单，但却非常灵活，它可以应用于任何类型的应用程序，包括 Web 应用、移动应用、桌面应用等等。
实现原理
Redux 的实现原理比较复杂，但核心代码只有几十行，下面是一个简化版的实现：
// www.javascriptcn.com code example
function createStore(reducer) {
let state;
let subscribers = [];
function dispatch(action) {
state = reducer(state, action);
subscribers.forEach((subscriber) => subscriber());
}
function getState() {
return state;
}
function subscribe(subscriber) {
subscribers.push(subscriber);
return () => {
subscribers = subscribers.filter((s) => s !== subscriber);
};
}
dispatch({ type: '@@redux/INIT' });
return {
dispatch,
getState,
subscribe,
};
}上面的代码实现了一个 createStore 函数，它接收一个 reducer 函数作为参数，返回一个 store 对象。
store 对象有三个方法：
- dispatch：派发 action，触发状态变化。
- getState：获取当前状态。
- subscribe：订阅状态变化，当状态发生变化时会调用订阅者提供的回调函数。
在 createStore 函数中，我们定义了一个 state 变量用于保存当前状态，以及一个 subscribers 数组用于保存所有订阅者。dispatch 方法接收一个 action 对象，它会将当前状态和 action 对象传递给 reducer 函数处理，并将返回的新状态保存到 state 变量中。最后，dispatch 方法会遍历 subscribers 数组，调用每个订阅者提供的回调函数，让它们可以更新自己的状态。
getState 方法很简单，直接返回 state 变量即可。
subscribe 方法会将订阅者添加到 subscribers 数组中，并返回一个取消订阅的函数。当订阅者不再需要接收状态变化时，可以调用该函数取消订阅。
示例代码
下面是一个使用 Redux 的计数器应用程序示例代码：
// www.javascriptcn.com code example
// 定义 reducer 函数
function reducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// 创建 store 对象
const store = createStore(reducer);
// 订阅状态变化
const unsubscribe = store.subscribe(() => {
console.log(store.getState());
});
// 派发 action
store.dispatch({ type: 'INCREMENT' }); // 输出 1
store.dispatch({ type: 'INCREMENT' }); // 输出 2
store.dispatch({ type: 'DECREMENT' }); // 输出 1
// 取消订阅
unsubscribe();在上面的代码中，我们首先定义了一个 reducer 函数，它接收一个 state 和 action，根据 action 的 type 属性来判断需要进行哪种状态变化，并返回新的状态。接着，我们使用 createStore 函数创建了一个 store 对象，并将 reducer 函数传递给它。然后，我们使用 subscribe 方法订阅了状态变化，每当状态发生变化时，就会输出当前的状态。最后，我们使用 dispatch 方法派发了一些 action，触发了状态变化。最后，我们使用 unsubscribe 方法取消了订阅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2356ca941bf7134432fcb