Handling the user input

To add some interactivity (and show how to dispatch actions from the user interface), we will implement a feature that adds an exclamation mark to a post when it is clicked.

We just need to add a click event listener to each post. In this event listener, we store.dispatch() an editPost action that adds a ! to the post text. We can do this in our render() function:

const render = () => {
  root.innerHTML = ''
  const { posts } = store.getState()
  posts.forEach((post, index) => {
    const item = document.createElement('li')
    item.addEventListener('click', () =>
      store.dispatch(editPost(index, post.text + '!'))
    )
    const text = document.createTextNode(post.user + ' - ' + post.text)
    item.appendChild(text)
    root.appendChild(item)
  })
}

Note how we use the index (which forEach passes as a second argument to the callback function) and the current post text (post.text) to create the editPost action.

Try clicking on a post, and see how the exclamation mark gets added: