In a typical web application, user interactions that trigger DOM events ("click"
, "keydown"
, etc…) can be listened for and responded to using an event listener.
Similarly, in Redux, actions dispatched to the store
can be listened for and responded to using the store.subscribe()
method. This method accepts one argument: a function, often called a listener, that is executed in response to changes to the store
‘s state.
const reactToChange = () => console.log('change detected!'); store.subscribe(reactToChange);
In this example, each time an action is dispatched to the store
, and a change to the state occurs, the subscribed listener, reactToChange()
, will be executed.
Sometimes it is useful to stop the listener from responding to changes to the store
, so store.subscribe()
returns an unsubscribe
function.
We can see this in action in the light switch application:
// lightSwitchReducer(), toggle(), and store omitted... const reactToChange = () => { console.log(`The light was switched ${store.getState()}!`); } const unsubscribe = store.subscribe(reactToChange); store.dispatch(toggle()); // reactToChange() is called, printing: // 'The light was switched off!' store.dispatch(toggle()); // reactToChange() is called, printing: // 'The light was switched on!' unsubscribe(); // reactToChange() is now unsubscribed store.dispatch(toggle()); // no print statement! console.log(store.getState()); // Prints 'off'
- In this example, the listener function
reactToChange()
is subscribed to thestore
- Each time an action is dispatched,
reactToChange()
is called and prints the current value of the light switch. It is common for callbacks subscribed to thestore
to usestore.getState()
inside them. - After the first two dispatched actions,
unsubscribe()
is called causingreactToChange()
to no longer be executed in response to further dispatches made tostore
.
Note: It is not always required to use the
unsubscribe()
function returned bystore.subscribe()
, though it is useful to know that it exists.
Now, take a look at store.js in the code editor. You will see that a few actions have been dispatched to the store
of the counter application. Suppose you wanted to print the current value of store.getState()
each time the state changes. While you could write something like this…
store.dispatch(decrement()); console.log(`The count is ${store.getState()}`); store.dispatch(increment()); console.log(`The count is ${store.getState()}`); store.dispatch(increment()); console.log(`The count is ${store.getState()}`);
…we know that this approach is repetitive. Instead, you can subscribe a change listener to print out the current state in response to state changes automatically.
Instructions
The first thing to do is to define a state change listener.
Define a function called printCountStatus()
with no arguments. It should print to the console the following message:
console.log(`The count is ${REPLACE_WITH_CURRENT_STATE}`);
Make sure to replace REPLACE_WITH_CURRENT_STATE
with the proper code for getting the current state from the store
.
Now that you have a change listener function, subscribe it to the store
so that it is called each time the state changes.
If done correctly, you should see this in the console output:
The count is -1 The count is 0 The count is 1