Learning Redux

Rendering the user interface

Now we can (re-)render our user interface every time the state changes. To keep it simple, we will not use a library yet. Perform the following steps and edit the src/index.js file, adding the following code:

1. First, we define a reference to the <div> root we created in the index.html file earlier:

const root = document.getElementById('root')

2. Then, we define a render() function, which will be subscribed to the store:

const render = () => {

3. In the render() function, we first clear the <div>:

  root.innerHTML = ''

4. Next, we get all posts from the current state of the store:

  const { posts } = store.getState()

5. Now that we have an empty container and an array of posts, we render all posts in a list:

 posts.forEach((post) ...