javascript - 有人可以解释 createStore 函数以及如何将计数器函数传递给它才能使它了解状态吗？

Question

这个 createStore 函数采用了 reducer 函数，但我真的不明白发生了什么，当我们执行 store.getState() 时，它如何知道计数器的当前状态，我知道 createStore( ) 将返回一个函数对象，但我不明白它们是如何工作的。另外，为什么我们需要 Listeners 数组我知道有人解释过，但我正在寻找一个更简单的例子，如果有人解释该数组将包含什么以及为什么我们最后取消订阅这些监听器，我将不胜感激。

如果有人向我解释如何调试该代码，我也将非常感激，我在 Chrome 调试器中不断得到空值。

最后一个问题，仅仅传递计数器函数如何让它知道它的状态。我在 reducer 函数本身中没有看到任何类似 state = state 的赋值。非常感谢您。

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default: 
      return state;
  }
}

const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

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

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

  dispatch({});

  return { getState, dispatch, subscribe };
};

const store = createStore(counter);

const render = () => {
  document.body.innerText = store.getState();
};

store.subscribe(render);
render();

document.addEventListener('click', () => {
  store.dispatch({ type: 'INCREMENT' });
});

Answer 1

How does it know what is the current state of the counter when we do store.getState() ?

它存储在state 变量中。最初它是 undefined，每当您调用 dispatch 时，它都会调用传递的 reducer 并派生一个新状态。要获得初始状态，它会执行以下操作:

 dispatch({});

然后调用 reducer 为:

 state = reducer(/*state: */ undefined, /*action: */ {}) /*0*/

将进入开关的默认分支，并返回0，因此state从现在开始为0。如果您再次调用 dispatch，例如:

  dispatch({ type: "INCREMENT" });

然后 reducer 再次被调用，但是这次进入了 switch 的另一个分支，state 增加了:

 state = reducer(/*state:*/ 0, /*action:*/ { type: "INCREMENT" }) /*1*/

Also, why we need the Listeners array?

因为当某个状态发生变化时，您的页面的多个部分可能需要更新。因此，您可以将多个监听器附加到它，然后在状态更新时调用它们。

why do we unsubscribe those listeners at the end?

因为有些情况下，监听器正在更新的页面部分已经消失，然后仍然更新它就没有什么意义了，这只会浪费计算时间。通过取消订阅，您可以删除监听器，因此不会再发生更新..

how does just passing the counter function makes it aware of it's state ?

事实并非如此。如上所示，reducer(在本例中为 counter)通过一个空操作被调用，然后将导致初始状态。

I would really apperciate also if someone explained to me how to debug that code

我会放置一些断点，例如在 count、dispatch、render 函数和 onClick 处理程序的第一行，然后重新加载页面可以看到它从dispatch内部调用了count，然后每次点击页面都会遍历这样的代码onClick -> dispatch -> count -> render.