listener(） 在 Redux 存储中做什么

What listener() does in the Redux store?

本文关键字：什么 存储 Redux listener      更新时间：2023-09-26

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

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

所以这段代码遍历了监听器数组中的每个项目，我知道每个侦听器都需要更新，但我不明白 listener（） 在做什么。这个功能从何而来？

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

例如：

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

带有 console.log 的函数将在状态更改后调用。

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

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

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

在该上下文中，"侦听器"是传递给 lambda 表达式的函数的变量名称。

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

简而言之，此代码将遍历一系列函数并调用每个函数。

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

Array.prototype.forEach

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

箭头函数

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

侦听是存储区中采用处理程序的方法。处理程序是一个函数，当调用时会导致 DOM 呈现： 

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

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

相关文章：