In React, every class component can have a state. Maintaining a state is a side effect and not pure, so we will not use that in this application. Instead, we will use Stateless Functional Components, which are pure. We still need to maintain the state of the application. We will use the Flux architecture to do that. With Flux, you need to write a small piece of non-pure, but the other parts of the application can be written pure. The architecture can be divided into these parts:
Store: Contains the state of the application
View: React components that render the state to HTML
Action: A function that can modify the state (example: rename the spreadsheet)
Dispatcher: A hub modifies the state by executing an action
Several implementations of Flux exist. We will build our own, so that we can understand the ideas better and we can create an implementation that can be properly typed using TypeScript.
We will implement these parts in the following sections.