Skip to Content
Learn
Intro to the Core Redux API
Respond to State Changes

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 the store
  • 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 the store to use store.getState() inside them.
  • After the first two dispatched actions, unsubscribe() is called causing reactToChange() to no longer be exectued in response to further dispatches made to store.

Note: It is not always required to use the unsubscribe() function returned by store.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

1.

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.

2.

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
Folder Icon

Take this course for free

Already have an account?