Redux - where in program does subscribe() go?

JavaScript
1

Tell us what’s happening:
I don’t understand how subscribe() is called? Where should I put it? In the reduceer? Does it get called for every action dispatched to the store, behind the scenes.

Your code so far


const ADD = 'ADD';

const reducer = (state = 0, action) => {
switch(action.type) {
  case ADD:
    return state + 1;
    store.subscribe(incrementCount())
  default:
    return state;
}
};

const store = Redux.createStore(reducer);

// global count variable:
let count = 0;

const incrementCount = () =>
count +=1;

store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);
store.dispatch({type: ADD});
console.log(count);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Register a Store Listener

Link to the challenge:

1 Like
2

Hello @terrifricker,

subscribe() is a method of store object. To call it use store.subscribe(). It should be called before you dispatch any actions in your code. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed.

If you put this code store.subscribe(() => (console.log('subscirber was called'))) right after defining incrementCount function. You will see in console subscirber was called for three times.

What you have to do now is to pass to subscriber() method a function which will change count value instead of just dummy console logging. :slight_smile:

1 Like
3

Think of it this way:

  • Store: keeps current state in memory
  • Reducer: function that produces new state (to be stores in the store) depending on action. It is completely your rule of how you want state to behave.
  • Dispatch: function that will run reducer and save result in the store - basically a helper function that does one thing instead of 2 things. It nothing else than this:
store.dispatch = (action) => {
  store.state = reducer(store.state, action);
};
  • Subscribe: pub-sub (or listener method) of the store. Just like you add addEventListener to a button to run your custom callback whenever button is clicked, in the same way you subscribe and listen to the change of state and run your custom callback whenever the change occur.

As with event listeners you really want to subscribe just once and you can do that in any convenient for you place, just make sure the store is in scope. Subscribing inside the reducer will result in multiple subscriptions, as reducer will be invoked on each dispatch :point_up: so that’s really bad place to put it. Most logical place in your example would be right after you created store and defined your callback:

const store = Redux.createStore(reducer);
let count = 0;
const incrementCount = () => count +=1;
store.subscribe(incrementCount); // NOTE!! You don't run callback, but passing it

*NOTE, subscribe method expects argument of “function” type. Whenever you aren’t sure what to pass, either incrementCount() or incrementCount, you can run following as a reminder:

typeof incrementCount(); // undefined
typeof incrementCount; // function
2 Likes
4

Thank you both so much.