实现一个函数 createStore(reducer, initialState)，创建一个 Redux store

推荐答案

// www.javascriptcn.com code example
function createStore(reducer, initialState) {
  let state = initialState;
  let listeners = [];

  function getState() {
    return state;
  }

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

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

  dispatch({ type: '@@INIT' });

  return {
    getState,
    dispatch,
    subscribe
  };
}

本题详细解读

1. 函数签名

createStore(reducer, initialState) 是一个工厂函数，用于创建一个 Redux store。它接受两个参数：

• reducer: 一个纯函数，用于根据当前状态和 action 来计算出新的状态。
• initialState: 初始状态，通常是一个对象。

2. 内部状态

• state: 用于存储当前的状态，初始值为 initialState。
• listeners: 用于存储所有订阅了状态变化的监听器函数。

3. getState 方法

getState() 方法用于获取当前的状态。它直接返回 state 变量。

4. dispatch 方法

dispatch(action) 方法用于分发一个 action。它会调用 reducer 函数，传入当前状态和 action，计算出新的状态，并更新 state。然后，它会遍历 listeners 数组，调用每个监听器函数，通知它们状态已经发生变化。

5. subscribe 方法

subscribe(listener) 方法用于订阅状态变化。它会将传入的 listener 函数添加到 listeners 数组中，并返回一个取消订阅的函数。取消订阅的函数会将 listener 从 listeners 数组中移除。

6. 初始化

在 createStore 函数返回之前，会调用一次 dispatch({ type: '@@INIT' })，以确保初始状态被正确设置。

7. 返回值

createStore 函数返回一个对象，包含三个方法：getState、dispatch 和 subscribe。这些方法构成了 Redux store 的核心功能。