Learn

Intro to the Core Redux API

Implementing a React+Redux App

Now that you have implemented the counter app using the HTML DOM API, and have seen a working React+Redux application, it is time to implement it using React.

Take a look at the store.js file and you will find the following functions and values have been defined for you:

The action creators increment() and decrement()
The store and its reducer countReducer()
A React component called CounterApp which declares two event handlers, onIncrementButtonClicked and onDecrementButtonClicked
A render() function which renders CounterApp using ReactDOM.render()

The React component CounterApp and the render() function are entirely disconnected from the Redux store. Let’s change that!

Instructions

At this point, you should be familiar with the desired functionality of this UI. Notice that nothing is currently being rendered in the web browser.

First, below the render() function’s definition, call render() once to render the UI with the initial state.

The CounterApp component should display the current state of the store. Before it can display the current state, it must be given the current state value.

Within the render() function, pass a prop value to CounterApp called state. Its value should be the current state of the store. Your render() function should look something like this:

const render = () => {
  ReactDOM.render(
    <CounterApp 
      state={currentStateValueGoesHere} 
    />,
    document.getElementById('root')
  )
}

Now that the current state of the store is being passed to the CounterApp component, it can render that data in the UI.

First, at the top of the CounterApp() function, declare a variable called state. It should be assigned the value of props.state.

Then, modify the <h1> element inside the return statement of render() such that it displays the current state.

At this point, your user interface should be displaying the current state of the store, 0. The next step is to update the state when either of the buttons are pressed.

First, modify the onIncrementButtonClicked event handler such that it dispatches an increment() action to the store.

Then, modify the onDecrementButtonClicked event handler such that it dispatches a decrement() action to the store.

Well done! So far we can display the current state and dispatch action from the <CounterApp /> - all that’s left is to re-render the component every time the state changes.

At the bottom of store.js, subscribe the render function to the store.

Take this course for free

Or sign up using:

Already have an account?