Dispatching actions

Dispatching actions works in the same way for any action. Just running the store.dispatch() method will send the action to the reducer. You just need to pass an object as the first argument with the corresponding type property and the value.

We can start by triggering the action to add a new task to the state. Inside the todo-app.js file under store.subscribe(), we can add these lines of code that will handle how the form works:

const form = document.getElementById("add-todo");
form.addEventListener("submit", event => {
  event.preventDefault();
  const inputValue = event.target.elements.todoText.value;
  store.dispatch({
    type: "ADD_TODO",
    title: inputValue,
    id: Date.now()
  });
  event.target.elements.todoText.value = "";
});

Here, we're accessing the form element and adding an eventListener...