10 Managing state

 

This chapter covers

  • Persisting application state in memory
  • Coordinating state across multiple components
  • Organizing application state
  • Persisting application state using browser local storage

State management is always a hot topic in SPA applications. But what is state? Well, state can be thought of as the sum of all data held by a system at any given point in time. We’ve already seen lots of examples of state in previous chapters. Anywhere we’ve created a field or property on a component to store a value is state. Users of an application alter state all the time by performing actions within the system. They might click a button that increments a counter or enter values in a form that trigger validation.

Sometimes user actions might alter state, which has consequences across multiple components. A good example of this is when a user adds an item to their cart on Amazon. The basket automatically updates to show the number of items it’s currently holding. This is when state management comes into play.

10.1 Simple state management using an in-memory store

10.1.1 Creating and registering a state store

10.1.2 Saving data entered on the form to AppState

10.2 Improving the AppState design to handle more state

10.3 Creating persistent state with browser local storage

10.3.1 Defining an additional state store

10.3.2 Adding and removing trails from thefavorites list

10.3.3 Displaying the current number of favorite trails

10.3.4 Reorganizing and refactoring

10.3.5 Showing favorited trails on the favorite trails page

10.3.6 Initializing AppState

Summary