Updating the Root Reducer

Let’s update the rootReducer to support persistence.

To support persistence, we need to update the root reducer first. We’ll change our original file:

import { combineReducers } from 'redux';
import recipes from './recipes';
import ingredients from './ingredients';

export default combineReducers({
  recipes,
  ingredients
});

To this updated file:

import { persistCombineReducers } from 'redux-persist'
import recipes from './recipes';
import ingredients from './ingredients';
import storage from 'redux-persist/es/storage';

const config = { key: 'root', storage };

export default persistCombineReducers(config, {
  recipes,
  ingredients
});

In the new code, we use the persistCombineReducers() method of redux-persist instead of the regular combineReducers() from redux. An additional config parameter provides the information needed by redux-persist on where and how to store the state.

The config object has many other configuration fields, described in detail in the redux-persist library’s documentation.

Get hands-on with 1200+ tech skills courses.