Blog>
Snippets

Configuring Redux Persist with Redux v5.0.0

How to set up Redux Persist in a Redux v5.0.0 project to maintain the Redux store state between page reloads.
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web

// Import the root reducer from your Redux setup
import rootReducer from './reducers';

// Configuration object for redux-persist
const persistConfig = {
  key: 'root',
  storage,
};

// Create a persisted reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Create a store with the persisted reducer
const store = createStore(persistedReducer);

// Export the store and the persistor
export const persistor = persistStore(store);
export default store;
This code snippet is configuring Redux Persist with Redux v5.0.0. It first imports necessary functions and the storage from redux-persist. Then, it defines the configuration object for redux-persist, where 'key' represents the key used for storing the data and 'storage' specifies the storage engine. A persisted reducer is created using the persistReducer function, and then the Redux store is created using this persisted reducer. Finally, a persistor is created, and both the store and persistor are exported for use in the application.