03-app-structure/07-initial-state.md

initialState.js

initialState.js

initialState.js defines the default shape of the application state.

It lives in:

shared/store/initialState.js

Keeping the initial state in one file makes the state structure easy to inspect and reason about.

Responsibilities

initialState.js should:

• define the top-level state structure
• provide default values for each slice
• match the reducers registered in the store

Example pattern:

export const initialState = {
  files: {
    items: []
  },

  ui: {
    modal: null
  }
};

Rules

• keep the state shape predictable
• group state by feature when possible
• avoid deeply nested structures unless necessary
• match reducer ownership clearly

Why this matters

A clear initial state helps:

• debugging state transitions
• understanding reducer boundaries
• inspecting store snapshots

Final rule

A reader should be able to understand the main state structure by reading only initialState.js.