State Shape

Most applications deal with multiple types of data, which can be broadly divided into three 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")

Because the store represents the core of your application, you shoulddefine your state shape in terms of your domain data and app state, not your UI component tree. As an example, a shape ofstate.leftPane.todoList.todoswould be a bad idea, because the idea of "todos" is central to the whole application, not just a single part of the UI. Thetodosslice should be at the top of the state tree instead.