State management

The toughest thing to get right is state management. Unfortunately that's a lesson we learned over time, and without good planning you can lose your sanity.

Luckily, Redux/React is so good at abstracting away typical frontend work that we only need to focus on how to manage state.

Isn't redux meant to solve state issues?

Yes. Kind of. Well, not really. Redux is a suite to manage state. It gives you a global state store; a connector to pass state into components; middleware; and actions.

It does not give you any rules for structuring your state. Or for requesting data from the server within nested components. Or for managing UI state across unrelated components.

State problems

These are the core state issues that you'll to run in to when building apps:

  1. Syncing data with the server
    1. Tracking AJAX request statuses
    2. Deduping actions within child components
    3. Cache invalidation
    4. Universal apps
  2. Transforming state per component
  3. UI state

We tackle each of these problems in the following subchapters.