Redux中的createStore：揭秘Redux容器背后的创建原理

见解分享

2024-02-13 14:23:52

Redux 的核心概念

在介绍 createStore 的原理之前，我们先回顾一下 Redux 的核心概念，以便更好地理解 createStore 的作用。

状态（State）： Redux 中的状态是一个包含所有应用程序数据的对象。应用程序中的所有组件都可以访问和修改状态，但只能通过处理器函数来修改。
处理器（Reducer）： 处理器函数是一个纯函数，它接收两个参数：当前状态和要执行的动作。处理器函数返回一个新的状态，该状态是根据当前状态和动作计算出来的。
动作（Action）： 动作是一个应用程序状态变更的对象。它包含两个属性：类型和有效载荷（Payload）。类型用于标识动作的类型，有效载荷则包含与该动作相关的数据。
容器（Store）： 容器是 Redux 中的核心组件，它负责保存应用程序的状态，并向组件提供访问和修改状态的接口。

createStore 方法的原理

Redux 中的 createStore 方法用于创建容器。它接收一个处理器函数作为参数，并返回一个容器对象。容器对象提供了以下方法：

getState()： 获取当前状态。
dispatch(action)： 派发动作。
subscribe(listener)： 订阅状态变更监听器。

createStore 内部实现

createStore 方法的内部实现如下：

export default function createStore(reducer, initialState) {
  let state = initialState;
  const listeners = [];

  return {
    getState() {
      return state;
    },

    dispatch(action) {
      state = reducer(state, action);
      listeners.forEach(listener => listener());
    },

    subscribe(listener) {
      listeners.push(listener);
      return () => {
        listeners.filter(l => l !== listener);
      };
    },
  };
}

createStore 的工作原理

createStore 方法首先会创建一个 state 变量，该变量用于存储应用程序的状态。state 变量的初始值是 initialState 参数的值。

然后，createStore 方法创建一个 listeners 数组，该数组用于存储状态变更监听器。

接下来，createStore 方法返回一个容器对象。该容器对象包含三个方法：getState()、dispatch() 和 subscribe()。

getState() 方法用于获取当前状态。

dispatch() 方法用于派发动作。当 dispatch() 方法被调用时，它会调用处理器函数，并将当前状态和动作作为参数传递给处理器函数。处理器函数返回一个新的状态，该状态是根据当前状态和动作计算出来的。然后，dispatch() 方法会将新的状态存储在 state 变量中，并调用所有状态变更监听器。

subscribe() 方法用于订阅状态变更监听器。当 subscribe() 方法被调用时，它会将状态变更监听器添加到 listeners 数组中。当 dispatch() 方法被调用时，它会调用所有状态变更监听器。

总结

Redux 中的 createStore 方法用于创建容器。容器对象提供了以下方法：

getState()： 获取当前状态。
dispatch(action)： 派发动作。
subscribe(listener)： 订阅状态变更监听器。

createStore 方法的内部实现如下：

export default function createStore(reducer, initialState) {
  let state = initialState;
  const listeners = [];

  return {
    getState() {
      return state;
    },

    dispatch(action) {
      state = reducer(state, action);
      listeners.forEach(listener => listener());
    },

    subscribe(listener) {
      listeners.push(listener);
      return () => {
        listeners.filter(l => l !== listener);
      };
    },
  };
}

createStore 方法的原理是：

创建一个 state 变量，该变量用于存储应用程序的状态。
创建一个 listeners 数组，该数组用于存储状态变更监听器。
返回一个容器对象。该容器对象包含三个方法：getState()、dispatch() 和 subscribe()。
getState() 方法用于获取当前状态。
dispatch() 方法用于派发动作。当 dispatch() 方法被调用时，它会调用处理器函数，并将当前状态和动作作为参数传递给处理器函数。处理器函数返回一个新的状态，该状态是根据当前状态和动作计算出来的。然后，dispatch() 方法会将新的状态存储在 state 变量中，并调用所有状态变更监听器。
subscribe() 方法用于订阅状态变更监听器。当 subscribe() 方法被调用时，它会将状态变更监听器添加到 listeners 数组中。当 dispatch() 方法被调用时，它会调用所有状态变更监听器。