Persist Redux Slice

Automatically persist a redux slice in localStorage.

1// store.js
2
3import { configureStore } from "@reduxjs/toolkit";
4
5import { 
6  persist, 
7  persistenceMiddleware, 
8  LoadSlicesFromLocalStorage 
9} from "persist-redux-slice";
10
11import counterReducer from "./slices/counter.js";
12
13export const store = configureStore({
14  reducer: {
15    counter: persist({ counter: counterReducer }),
16  },
17  middleware: (getDefaultMiddleware) => {
18    return getDefaultMiddleware().concat(persistenceMiddleware);
19  },
20});
21
22store.dispatch(LoadSlicesFromLocalStorage);

1// slices/counter.js
2
3const slice = createSlice({
4  name: "counter",
5  initialState: { },
6  reducers: { },
7});
8
9export default slice.reducer;

Options

persist can take a second options object.

• msDebounce: Slices are written to localStorage after a period of inactivity, to prevent rapid subsequent writes. Defaults to 250ms.
• storageKey: A unique key in localStorage. Defaults to the name of the slice concatenated with a hash.

1persist(
2  { counter: counterReducer }, 
3  { msDebounce: 1500, storageKey: "my-unique-key" }
4);

Reducer Name

In persist's first object, the key should be a slice's name, and the value is its reducer.

For example, consider a slice named "counter":

1// slices/counterSlice.js
2
3const counterSlice = createSlice({
4  name: "counter", // <--------- slice name is "counter"
5  initialState: {},
6  reducers: {},
7});
8
9export default counterSlice.reducer;

It's easiest to import a reducer by its name:

1// store.js
2
3import counter from "./slices/counterSlice.js";
4//       ↑
5// (same as slice name)
6
7export const store = configureStore({
8  reducer: {
9    counter: persist({ counter }),
10  },
11  // ...
12});

Alternatively you can import a reducer by a different name:

1// store.js
2
3import counterReducer from "./slices/counterSlice.js";
4
5export const store = configureStore({
6  reducer: {
7    // specify slice name ↓
8    counter: persist({ counter: counterReducer }),
9  },
10  // ...
11});