Redux 是一个流行的 JavaScript 应用程序状态管理工具，它提供了一种可预测的状态管理方案，使得应用程序的状态变得可追溯、可调试，并且易于维护。Redux 基于 Flux 架构，通过单向数据流的方式来管理应用程序的状态。在 Redux 中，所有的状态都被存储在一个称为 Store 的对象中，并且只能通过 Dispatch 函数来修改状态。本文将详细解析 Redux 的核心函数 createStore，帮助读者深入理解 Redux 的实现原理。
createStore 函数的作用
createStore 函数是 Redux 的核心函数之一，它的作用是创建一个新的 Store 对象。Store 对象是 Redux 中的核心概念，它存储了应用程序的状态，并提供了一些函数用于修改状态。createStore 函数接受三个参数：reducer、preloadedState 和 enhancer。
- reducer：reducer 是一个纯函数，它接受两个参数：state 和 action，返回一个新的状态。reducer 的作用是根据当前的状态和接收到的 action 来计算出新的状态。在 Redux 中，所有的状态都由 reducer 来计算。
- preloadedState：preloadedState 是一个可选参数，它用于初始化 Store 的状态。如果不提供 preloadedState，则使用 reducer 的默认状态。
- enhancer：enhancer 是一个可选的高阶函数，它可以对 Store 进行增强。Redux 提供了一个叫做 applyMiddleware 的 enhancer，它可以用于添加中间件。
createStore 函数的实现
下面是 createStore 函数的简化实现：
// javascriptcn.com 代码示例
function createStore(reducer, preloadedState, enhancer) {
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState;
preloadedState = undefined;
}
let currentState = preloadedState;
let currentReducer = reducer;
let listeners = [];
function getState() {
return currentState;
}
function dispatch(action) {
currentState = currentReducer(currentState, action);
listeners.forEach(listener => listener());
return action;
}
function subscribe(listener) {
listeners.push(listener);
return function unsubscribe() {
listeners = listeners.filter(l => l !== listener);
};
}
dispatch({ type: '@@redux/INIT' });
return {
getState,
dispatch,
subscribe
};
}createStore 函数首先会检查 preloadedState 和 enhancer 的类型，如果 preloadedState 是一个函数且 enhancer 未定义，则将 enhancer 赋值为 preloadedState，并将 preloadedState 赋值为 undefined。这是因为 createStore 函数可以接受两个参数或三个参数，如果只传递两个参数，第二个参数就是 preloadedState，如果传递了三个参数，第二个参数就是 preloadedState，第三个参数就是 enhancer。
接下来，createStore 函数会定义三个变量：currentState、currentReducer 和 listeners。currentState 存储了 Store 的当前状态，currentReducer 存储了当前的 reducer 函数，listeners 存储了所有的监听函数。
createStore 函数还定义了三个函数：getState、dispatch 和 subscribe。getState 函数用于获取 Store 的当前状态，dispatch 函数用于派发 action，subscribe 函数用于添加监听函数。dispatch 函数会调用 currentReducer 函数来计算新的状态，并且会调用所有的监听函数来通知状态变化。
最后，createStore 函数会派发一个初始 action，这个 action 的类型为 '@@redux/INIT'，这个 action 的作用是让 reducer 返回默认状态。
createStore 函数的示例
下面是一个使用 createStore 函数创建 Store 的示例：
// javascriptcn.com 代码示例
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
const store = createStore(counterReducer);
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch({ type: 'INCREMENT' }); // 输出：1
store.dispatch({ type: 'INCREMENT' }); // 输出：2
store.dispatch({ type: 'DECREMENT' }); // 输出：1上面的示例中，我们定义了一个 counterReducer 函数，它接受一个状态和一个 action，根据 action 的类型来计算新的状态。然后我们使用 createStore 函数创建了一个新的 Store，传递了 counterReducer 函数作为 reducer。接着我们添加了一个监听函数，它会在 Store 的状态变化时输出当前的状态。最后我们派发了三个 action，分别是 INCREMENT、INCREMENT 和 DECREMENT，它们会分别将状态加一、加一和减一。
总结
本文详细解析了 Redux 的核心函数 createStore，帮助读者深入理解 Redux 的实现原理。createStore 函数是 Redux 中最基本的函数之一，它用于创建一个新的 Store 对象。createStore 函数接受三个参数：reducer、preloadedState 和 enhancer，其中 reducer 是一个纯函数，用于计算新的状态；preloadedState 是一个可选参数，用于初始化 Store 的状态；enhancer 是一个可选的高阶函数，用于对 Store 进行增强。createStore 函数的实现非常简单，它只是定义了三个变量和三个函数，并且派发了一个初始 action。最后，我们通过一个示例代码演示了如何使用 createStore 函数创建一个新的 Store 对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fe50495b1f8cacd892e4c