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
, anddecrementer
: references to the HTML elements in index.htmlrender
: A state-change listener for responding to changes to thestore
‘s state.incrementerClicked
anddecrementerClicked
: 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
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
.
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).
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.
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
.