Our application needs a UI so let's create that:
// dataflow/dist/index.html
<html>
<body>
<div>
<input type="text" id="input">
<button id="saveButton">Save</button>
</div>
<div>
<ul id="list"></ul>
</div>
<button id="saveButton">Save</button>
<script src="bundle.js"></script>
</body>
</html>
So, here we have an input element and a button that we can press to save a new item. This is followed by a list, where our content will be rendered.
Let's create the todo-app.js next. It should look like the following:
// dataflow/todo-app.js
// import create view
import createView from "./create-view";
// import list view
import listView from "./list-view";
Here, we are requiring in the two controllers so we can collect input as well as displaying store content. Let's try out our application by typing npm start in the Terminal window. This will create the bundle.js file in a dist folder. To display the app, we need to fire up another terminal window and place ourselves in the dist folder. Your dist folder should consist of the following files:
- index.html
- bundle.js
Now we are ready to launch the app by typing http-server -p 5000. You will be able to find your app at http:localhost:5000 in your browser:
We see our expected application with an input element and a button, and we see our console to the right showing us that both our controllers were loaded. Additionally, we see the content of the items property of our store object, which points to an empty array. This is expected as we haven't added any items to it yet. Let's add an item to our store by adding a value to our input element and pressing the Save button:
On the right, we can see that our store now contains an item but our UI is not updated. The reason for that is that we don't actually subscribe to changes. We can change that by adding the following piece of code to our list-view.js controller file:
// 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 = "";
console.log("items", items);
items.forEach(item => {
const li = document.createElement("li");
li.innerHTML = item.title;
elem.appendChild(li);
});
}
}
const listItemsView = new ListItemsView();
export default listItemsView;
Now our app renders as it should and should look something like this, providing that you added a few items:
