Organization

• Organize data within that top-level object
• Each top-level key represents some "domain" or "slice" of related data

{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

Types of Data

3 categories:

• Domain data: data that the application needs to show, use, or modify (such as "all of the Todos retrieved from the server")
• App state: data that is specific to the application's behavior (such as "Todo #5 is currently selected", or "there is a request in progress to fetch Todos")
• UI state: data that represents how the UI is currently displayed (such as "The EditTodo modal dialog is currently open")

State Shape pattern

{
    domainData: {},
    featureState1: {},
    featureState2: {
      appState: {}
      uiState2: {}
    }
}

• Domain Data is stored in normalized
• Application State and UI State are stored in 'featureState'
• Container component gets data by combining data from different slices of state. For example, get current widget information: createSelector function is used with select functions (for selecting data from each slice of state) and a project function (for merging data into View Model).