侦听器（）在Redux商店中做了什么？

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变量。 它是一组函数，应在存储更新时调用。 您可以通过store方法subscribe方法将自己的函数添加到listeners中。

例如：

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();
});

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函数。