Redux 是流行的 JavaScript 应用程序状态管理工具。它的核心思想是使用单一的状态树来管理整个应用程序的状态，从而使状态变化变得可预测且容易理解。Redux 被广泛用于 React 应用程序中，但它也可以与其他框架和库一起使用。Redux 的主要方法包括 createStore、combineReducers、applyMiddleware 等。在本文中，我们将深入了解 Redux 中最主要的方法——createStore。
createStore 这个方法是用来干什么的？
createStore 方法是 Redux API 中最主要的方法之一。它提供了一种创建 Redux store 的方式。Redux store 是状态树的容器，它保存了整个应用程序的状态。Store 还提供了一些方法来访问、更新和监听状态的变化。
创建一个 store 的基本语法是：
import { createStore } from 'redux';
const store = createStore(reducer, initialState);其中，第一个参数 reducer 代表一个函数，它接收当前状态和一个 action 并返回一个新的状态。initialState 则是状态树的初始状态。createStore 方法返回一个对象，该对象包含以下方法：
getState()返回当前状态树。dispatch(action)分发一个 action 并返回该 action。subscribe(listener)将一个监听器添加到状态变化的监听列表中，当状态改变时自动调用监听器。
createStore 的实现原理
了解 createStore 的实现原理对于深入了解 Redux 很有帮助。Redux 的源代码相当容易理解，但由于 require.context 和 webpack 等工具的使用，这里我们以一个示例来说明 createStore 的工作原理。
考虑一个简单的应用程序状态对象，它由 counter 和 todos 两个属性组成：
const initialState = {
counter: 0,
todos: [],
};我们可以使用下面的 reducer 为该状态对象提供三个方法：增加计数器、减少计数器和添加新的待办事项：
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT': {
return {
...state,
counter: state.counter + 1,
};
}
case 'DECREMENT': {
return {
...state,
counter: state.counter - 1,
};
}
case 'ADD_TODO': {
return {
...state,
todos: [...state.todos, action.payload],
};
}
default: {
return state;
}
}
}现在，我们使用 createStore 方法创建一个 store：
const store = createStore(reducer, initialState);
Redux store 的核心是 dispatch 方法。这个方法接收一个 action 并将其派发到 reducer 中。具体来说，dispatch 方法会根据传入的 action 对象调用 reducer 函数，并将当前状态和 action 作为参数传入 reducer 中。reducer 然后根据 action 类型返回新的状态。这个新状态就是下一个应用程序的状态。Redux store 维护了当前状态，并在调用 reducer 函数时更新状态：
store.dispatch({ type: 'INCREMENT' }); // counter: 1
store.dispatch({ type: 'ADD_TODO', payload: 'learn Redux' }); // todos: ['learn Redux']getState 方法可以帮助我们获取当前状态：
const state = store.getState(); // { counter: 1, todos: ['learn Redux'] }subscribe 方法用于监听状态变化，我们可以使用它来处理状态变化后的事情：
store.subscribe(() => {
console.log(store.getState());
});createStore 方法的实现过程大致如下：
它接收一个 reducer 和一个 initialState 对象作为输入。initialState 参数是一个可选的状态对象。
它会创建一个内部状态对象 currentState，其初始值为 initialState。
它会创建一个监听器列表 listeners，用于保存监听状态变化的所有监听器。
它会创建一个 dispatch 函数，用于派发 action 并更新状态。每当 dispatch 被调用时，它将接收到的 action 对象传递给 reducer 函数，并将 currentState 作为第一个参数传递给 reducer 函数。reducer 函数会根据 action 类型返回新的状态。如果新状态与当前状态不同，则将新状态保存到 currentState 中，并在列表中调用所有监听器。
它会创建一个 getState 函数，用于获取当前状态。
它会创建一个 subscribe 函数，用于添加状态变化的监听器。每当 dispatch 函数被调用并且新状态与当前状态不同时，就会调用所有监听器。
总结
本文深入了解了 Redux createStore 的实现方式。我们了解了 createStore 的基本语法和返回对象包含的方法。我们还学习了一个简单的例子，它展示了如何使用 reducer 和 createStore 方法来为状态对象提供状态管理。Redux createStore 方法的实现方式很容易理解。理解这些原理对于学习 Redux 和进行状态管理非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b06ec0add4f0e0ff9c8de5