javascript - What listener() does in the Redux store? - Stack Overflow

admin管理员组

文章数量:1389829

I'm watching Dan Abramov's Redux videos on Egghead. In the video where he implements the Redux Store from scratch, he includes this code (around 1:28 - ):

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

So this code iterates through each item in the listener array, and I understand that each listener needs to be updated, but I don't get what listener() is doing. Where does this function e from?

I'm watching Dan Abramov's Redux videos on Egghead. In the video where he implements the Redux Store from scratch, he includes this code (around 1:28 - https://egghead.io/lessons/javascript-redux-implementing-store-from-scratch):

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

So this code iterates through each item in the listener array, and I understand that each listener needs to be updated, but I don't get what listener() is doing. Where does this function e from?

• javascript
• redux

Share Improve this question Follow edited Mar 22, 2016 at 20:32 Kory Gill 7,16111 gold badge2727 silver badges3535 bronze badges asked Mar 22, 2016 at 19:28 anonanon 2,36355 gold badges2929 silver badges3737 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

createStore method have listeners variable. It is an array of functions which should be called when store updates. You can add your own function into listeners through the subscribe method of store.

For example:

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

Function with console.log will be called after state will changed.

That syntax is called an arrow function and is new to ECMAScript 6. Without the special syntax, that code would look like this:

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

listeners is an array of functions. listeners is being iterated over with the Array.prototype.forEach function which takes a function as it's parameter.

'listener' in that context is the variable name given to the function passed into the lambda expression.

When the Array.prototype.forEach function invokes your function, it passes in the current item in the iteration. in this code that item is a function and it's just being invoked.

To put it simply, this code will iterate over an array of functions and invoke each one.

It might help to understand the API for the Array.prototype.forEach function. Here's the documentation:

Array.prototype.forEach

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

Arrow Functions

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

Listen is a method on the store that takes a handler. The handler is a function that when called causes the DOM to render:

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

The way I understand it is that the listeners array consists of the render function on different React ponents that are connected to the Redux store.

本文标签： javascriptWhat listener() does in the Redux storeStack Overflow