Learning Redux

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) }) ...