Need help how to use redux-persist in new typescript template

[PANKAJBAJAJ045]

I created a new project using this URL "npx degit reduxjs/redux-templates/packages/vite-template-redux my-app"

When I try to use redux-persist, I get an error, In documentation normal store is used but in the template below code is used to create a store.

// Infer the RootState type from the root reducer
export type RootState = ReturnType;

// The store setup is wrapped in makeStore to allow reuse
// when setting up tests that need the same store config
export const makeStore = (preloadedState?: Partial) => {
const store = configureStore({
reducer: rootReducer,
preloadedState
})
// configure listeners using the provided defaults
// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
//setupListeners(store.dispatch)
return store;
}

export const store = makeStore();

When I try to use redux-persist with the above code I am getting an error. I tried multiple things but nothing works , sometimes it is very hard to understand typescript errors

import { Action, ThunkAction, combineSlices, configureStore } from '@reduxjs/toolkit';
import {
persistReducer
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { authSlice } from './slice/auth/authSlice';
import { cartSlice } from './slice/cart/cartSlice';
import { skillSlice } from './slice/skill/skillSlice';

const persistConfig = {
key: 'root',
version: 1,
storage,
}

// combineSlices automatically combines the reducers using
// their reducerPaths, therefore we no longer need to call combineReducers.
const rootReducer = combineSlices(
authSlice, cartSlice, skillSlice
);

const persistedReducer = persistReducer(persistConfig, rootReducer);

// Infer the RootState type from the root reducer
export type RootState = ReturnType;

// The store setup is wrapped in makeStore to allow reuse
// when setting up tests that need the same store config
export const makeStore = (preloadedState?: Partial) => {
const store = configureStore({
reducer: persistedReducer,
// Adding the api middleware enables caching, invalidation, polling,
// and other useful features of rtk-query.
// middleware: getDefaultMiddleware => {
// return getDefaultMiddleware().concat(quotesApiSlice.middleware)
// },
preloadedState
})
// configure listeners using the provided defaults
// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
//setupListeners(store.dispatch)
return store;
}

export const store = makeStore();

// Infer the type of store
export type AppStore = typeof store;
// Infer the AppDispatch type from the store itself
export type AppDispatch = AppStore["dispatch"];
export type AppThunk<ThunkReturnType = void> = ThunkAction<ThunkReturnType, RootState, unknown, Action>;

[EskiMojo14]

what is the error you're getting?

[PANKAJBAJAJ045]

Hello

I am getting below error

Type 'Partial<{ auth: UserState; cart: CartState; skill: SkillState; }> | undefined' is not assignable to type '({ auth: UserState; cart: CartState; skill: SkillState; } & PersistPartial) | undefined'.
Type 'Partial<{ auth: UserState; cart: CartState; skill: SkillState; }>' is not assignable to type '{ auth: UserState; cart: CartState; skill: SkillState; } & PersistPartial'.
Type 'Partial<{ auth: UserState; cart: CartState; skill: SkillState; }>' is not assignable to type '{ auth: UserState; cart: CartState; skill: SkillState; }'.
Types of property 'auth' are incompatible.
Type 'UserState | undefined' is not assignable to type 'UserState'.
Type 'undefined' is not assignable to type 'UserState'.ts(2322)
configureStore.d.ts(40, 5): The expected type comes from property 'preloadedState' which is declared here on type 'ConfigureStoreOptions<{ auth: UserState; cart: CartState; skill: SkillState; } & PersistPartial, UnknownAction, Tuple<[ThunkMiddleware<{ auth: UserState; cart: CartState; skill: SkillState; } & PersistPartial, UnknownAction>]>, Tuple<...>, { ...; } & PersistPartial>'
(property) ConfigureStoreOptions<{ auth: UserState; cart: CartState; skill: SkillState; } & PersistPartial, UnknownAction, Tuple<[ThunkMiddleware<{ auth: UserState; cart: CartState; skill: SkillState; } & PersistPartial, UnknownAction>]>, Tuple<...>, { auth: UserState; cart: CartState; skill: SkillState; } & PersistPartial>.preloadedState?: ({
auth: UserState;
cart: CartState;
skill: SkillState;
} & PersistPartial) | undefined

Without using react-persist everything is working fine, but I want to use react-persist to handle browser refresh scenarios. Although there is a way I can use the store in a different way that is suggested on the internet, actually I am new to redux so I don't know which is better.

Personally, redux documentation is very complex to understand, to do something there are multiple ways, even official templates altogether flow with different syntax.

const persistedReducer = persistReducer(persistConfig, rootReducer);

// Infer the RootState type from the root reducer
export type RootState = ReturnType;

export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
})