Common State Structure

Our state will usually contain several different entities in a real-world application, including the application data itself (preferably normalized) and auxiliary data (e.g., the current access token or pending notifications).

Common state structure

Unlike the data coming from the server, some information will be used exclusively by our front-end application for its internal needs. A common example would be keeping the total number of active server requests to know whether to display a spinner. Or we might have a currentUser property where we keep information about the current user, such as their username and access token:

const state = {
  books: { },
  recipes: { },
  ingredients: { },
  ui: {
    activeRequests: 0
  },
  currentUser: {
    name: 'Kipi',
    accessToken: 'topsecrettoken'
  }
};

As our application grows, more types of state entities will creep in. Some of these will come from external libraries like redux-forms, react-router-redux, or others that require their own place in our state. Other entities will come from the application’s business needs.