Question

我在Egghead观看Dan Abramov的Redux视频。在他从头开始实现Redux Store的视频中，他包含了这段代码（大约1:28 - https://egghead.io/lessons/javascript-redux-implementing-store-from-scratch）：

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

因此，此代码遍历侦听器数组中的每个项目，并且我理解每个侦听器都需要更新，但我不知道listener（）正在做什么。这个功能来自哪里？

Answer 1

createStore方法有listeners个变量。它是一组函数，应在存储更新时调用。您可以通过listeners的方法subscribe方法将自己的函数添加到store。

例如：

const store = createStore(reducer);
store.subsribe(state => console.log(state)); // add function into listeners
store.dispatch(action);

状态改变后，将调用console.log的函数。

Answer 2

该语法称为箭头函数，是ECMAScript 6的新增功能。如果没有特殊语法，该代码将如下所示：

listeners.forEach(function(listener){
    return listener();
});

侦听器 s 是一组函数。侦听器正在使用Array.prototype.forEach函数进行迭代，该函数将函数作为其参数。

该上下文中的

'listener'是赋予传递给lambda表达式的函数的变量名。

当Array.prototype.forEach函数调用您的函数时，它会传入迭代中的当前项。在这段代码中，该项是一个函数，它只是被调用。

简单地说，这段代码将迭代一组函数并调用每一个函数。

了解Array.prototype.forEach函数的API可能会有所帮助。这是文档：

<强> Array.prototype.forEach

箭头功能

Answer 3

Listen是商店中采用处理程序的方法。处理程序是一个函数，在调用时会导致DOM呈现：

store.listen(() => {
  ReactDOM.render(
    <div>{JSON.stringify(store.getState(), null, 2)}</div>,
    document.getElementById('root')
  );
});

我理解的方式是，侦听器数组由连接到Redux存储的不同React组件上的render函数组成。