偵聽器（）在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函數。