Javascript 有人能解释一下createStore函数，以及仅仅将计数器函数传递给它是如何让它知道状态的吗？

这个createStore函数接受了reducer函数，但我真的不知道发生了什么，当我们存储.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' });
});

当我们存储.getState（）时，它如何知道计数器的当前状态

它存储在

状态

变量中。最初它是未定义的，无论何时调用dispatch，它都将调用传递的减速机并派生一个新状态。要获取初始状态，它需要执行以下操作：

 dispatch({});

然后将减速器称为：

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

这将进入开关的默认分支，并返回0，因此从现在起，

状态

为0。如果您再次呼叫调度，例如：

  dispatch({ type: "INCREMENT" });

然后再次调用reducer，但这一次进入开关的另一个branch，状态会增加：

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

还有，为什么我们需要侦听器数组

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

为什么我们最后要取消那些听众的订阅

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

仅仅传递计数器函数是如何让它知道它的状态的

没有。如上所示，使用空操作调用

减速机

（

在本例中为计数器

），这将导致初始状态

如果有人向我解释如何调试代码，我也会很感动

---

我会放置一些断点，例如在

count

的第一行、

dispatch

、

render

函数和onClick处理程序中，然后重新加载页面以查看它从

dispatch

中调用

count

，然后每次单击页面，它将像这样遍历代码onClick->

dispatch

->

count

->

render

，因此createStore函数只运行一次，然后计数器减缩器执行其余操作？我不确定是否正确，因此，如果我们只调用createStore一次，但始终引用createStore内部创建的state和listeners变量。如果是这样的话，请告诉我在Javascript中调用的是什么，因为我认为状态的范围是该函数的内部范围，我们不应该再访问它们了。我肯定我错了。但是请告诉我你的想法。@jason我想你要找的词是非常感谢，这对我来说很有意义。对于闭包，我以前遇到过它们，大多数示例都使用setTimeout函数，所以我从未真正理解过它们。但现在它有意义了。