The store – managing state, data retrieval, and callbacks

It's easy to think of the store as the place where our data lives. That is, however, not all it is. What the store's responsibilities are can be expressed by this list:

• Holder of state
• Manages the state, able to update it if need be
• Able to handle side effects such as fetching/persisting data through HTTP
• Handles callbacks

As you can see, that is a bit more than just storing the state. Let's now reconnect to what we were doing when we set up a listener with the dispatcher. Let's move that code into our store file, store.js, and let's persist our message content in our store:

// store.js

let store = {};

function selectIndex(index) {
  store["selectedIndex"] = index;
}

dispatcher.register(message => {
  switch (message.type) {
    case "SELECT_INDEX":
      selectIndex(message.data);
      break;
  }
});

OK, so now the store is being told about the new index, but an important piece is missing, how do we tell the UI? We need a way to tell the UI that something has changed. A change means that the UI should reread its data.