Now imagine that we are inside the code of the view that handles creating items; it may look something like this:

// dataflow/create-view.js

import { createItem } from "./actions";
import { dispatch, select } from "./redux";

console.log("create item view has loaded");

class CreateItemView {
  saveItem() {
    const elem = document.getElementById("input");
    dispatch(createItem(elem.value));
    const items = select("items");
    console.log(items);
  }
}

const button = document.getElementById("saveButton");
const createItemWiew = new CreateItemView();

button.addEventListener("click", createItemWiew.saveItem);

export default createItemWiew;

OK, so, in our create-view.js file we create a CreateItemView class that has a method saveItem() method on it. The saveItem() method is the first responder to a button click on a button with the ID saveButton. When the button is clicked, our saveItem()   method is invoked, which ends up calling our dispatch function with the createItem() action method, which in turn is using the input elements value as input, like so:

dispatch(createItem(elem.value));