[Redux] Supplying the Initial State

Posted 2020-07-19 Answer1215

We will learn how to start a Redux app with a previously persisted state, and how it merges with the initial state specified by the reducers.

 

The initial state of store is defined by the rootReducers:

const todoApp = combineReducers({
  todos,
  visibilityFilter,
});

 

And we use ‘todoApp‘ to create store:

const store = createStore(todoApp);

 

So the initial state should be default value of each reducer‘s state:

const todos = (state = [], action) => { ...


const visibilityFilter = (state = ‘SHOW_ALL‘, action) => { ...

 

If we want to show some persosted data as initial state, we can pass the persisted data as a second args to ‘createStore()‘ function:

const persistedState = {
  todos: [
    {
      id: 0,
      text: "Redux",
      completed: false
    }
  ]
};

const store = createStore(todoApp, persistedState);

 

So the rules are:

• If there is persisted data you want to display, use this second args, otherwise use ES6 default param
• Once persisted data is passed in, it will overwrite the default params.