How can I use persistStore with Redux-Toolkit?

Question

I have the following:

import AsyncStorage from '@react-native-async-storage/async-storage'
import { persistStore, persistReducer } from 'redux-persist';
import { configureStore } from "@reduxjs/toolkit";
import { searchReducer } from "./search/searchSlice"
import { userReducer } from "./user/userSlice"

export const store = configureStore({
  reducer: {
    search: searchReducer,
    user: userReducer
  }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

I need to persist only the user reducer. How can I do it since there isn't any definition of a 'user' reducer outside the configureStore function? What should be in the place in the "???" below?

const persistedReducer = persistReducer({
  key: "root",
  storage: AsyncStorage,
  whitelist: [???]
}, ???)

export const persistor = persistStore(store)

Answer 1

You can do as following.

const rootReducer = combineReducers({
  search: searchReducer,
  user: userReducer
});

export const store = configureStore({
    reducer: persistedReducer(rootReducer)
})

const persistedReducer = (reducers) => persistReducer({
    key: "root",
    storage: AsyncStorage,
    whitelist: ['user']
}, reducers);

Answer 2

The persistReducer function takes two arguments, a persist configuration object and a reducer to persist.

The reducer you would like to persist needs to be created and passed to the store when it is created. You can't persist specific reducers after the fact.

Example:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist';
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { searchReducer } from "./search/searchSlice";
import { userReducer } from "./user/userSlice";

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  whitelist: ["user"] // <-- name root state to allow, e.g. state.user
};

const rootReducer = combineReducers({
  search: searchReducer,
  user: userReducer, // <-- state.user
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
});

export const persistor = persistStore(store);

You can also persist just the userReducer if you like. See Nested Persists.

Example:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist';
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { searchReducer } from "./search/searchSlice";
import { userReducer } from "./user/userSlice";

const persistConfig = {
  key: "user",
  storage: AsyncStorage,
};

const persistedUserReducer = persistReducer(persistConfig, userReducer);

const rootReducer = combineReducers({
  search: searchReducer,
  user: persistedUserReducer,
});

export const store = configureStore({
  reducer: rootReducer,
});

export const persistor = persistStore(store);