Learn

Up until now, you have built a working counting application using Redux that lacks a proper user interface (UI). Let’s change that!

The UI for this application should display the current count number and allow the user to increment or decrement this value using the buttons provided. Take a look at the connected web browser window and you can see that the elements for such an interface are present, but they haven’t been connected to the Redux store yet.

Connecting a Redux store with any UI requires a few consistent steps, regardless of how the UI is implemented:

  • Create a Redux store
  • Render the initial state of the application.
  • Subscribe to updates. Inside the subscription callback:
    • Get the current store state
    • Select the data needed by this piece of UI
    • Update the UI with the data
  • Respond to UI events by dispatching Redux actions

These same steps are followed when building an interface using React, Angular, or jQuery. For now, we’ll create a very simple user interface for the counting application using the HTML DOM API.

Open up the index.html file and you can see the three HTML elements that are currently being rendered:

<p id='counter'>Waiting for current state.</p>
<button id='incrementer'>+</button>
<button id='decrementer'>-</button>

Now, open up store.js where you will find the pieces of Redux code that you have built throughout this lesson: the action creators increment() and decrement(), the reducer countReducer, and the store that ties it all together. Additionally, the following values have been added:

  • counterElement, incrementer, and decrementer: references to the HTML elements in index.html
  • render: A state-change listener for responding to changes to the store‘s state.
  • incrementerClicked and decrementerClicked: DOM event handlers for responding to the buttons being clicked by the user.

These new functions and elements will allow us to plug the Redux store into the UI. Let’s begin.

Instructions

1.

The counterElement should display the current value of the store, but currently it is displaying the message “Waiting for current state.” You can change this text by assigning a new value to counterElement.innerHTML like so:

counterElement.innerHTML = "New text to display";

Within the render() function, reassign counterElement.innerHTML to display the current state of the store in the UI.

Then, after the definition of render(), call it once to render the initial state of the store.

2.

The incrementerClicked() function will be called each time the incrementer button is clicked by the user. When this happens, the store should be notified and the state should be incremented by 1.

Inside incrementerClicked(), use store.dispatch() and the appropriate action creator to tell the store to increase its state by 1.

Note: completing this checkpoint will not cause the UI to change (you’ll see why soon).

3.

Now, pressing the incrementer button will send a { type: 'increment' } action object to the store which increases the value of the state to 1. But, the UI doesn’t seem to be updating.

In order for the UI to react to changes to the state of the store, you have to subscribe a change listener to the store using store.subscribe()!

Below the declaration of the render() function, call store.subscribe() and pass in render as the argument so that the UI re-renders each time the state of the store changes. Then, try clicking on the “+” button.

4.

Nicely done! Press the incrementer button and you should see the counter increase in the UI! All that’s left to do is get the decrementer button’s event handler to work.

Within decrementerClicked(), dispatch a decrement() action to the store.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?