Let's now shift our focus to our list-view.js file that we are yet to create:

// dataflow/list-view.js

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

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

class ListItemsView {
  constructor() {
    this.render();
    subscribe(this.render);
  }

  render() {
    const items = select("items");
    const elem = document.getElementById("list");

    elem.innerHTML = "";
    items.forEach(item => {
      const li = document.createElement("li");
      li.innerHTML = item.title;
      elem.appendChild(li);
    });
  }
}

const listItemsView = new ListItemsView();
export default listItemsView;

OK, so we utilize the select() method and get a slice of state from our state from the redux.js file we created. Thereafter, we render the response. As long as these views are on different pages, we will always get the latest version of items arrays from our state. However, if these views are visible at the same time, then we have a problem.