reactjs - Hvordan skrive redux-persist i redux toolkit sammen med TypeScript

Jeg har brukt Redux Persist i min Next.js-applikasjon, men nå vil jeg bruke Redux Toolkit sammen med TypeScript. Jeg har fått syntaksen for å skrive redux-persist i Redux Toolkit, men finner ingenting spesifikt for TypeScript. Kan noen vennligst foreslå en måte å implementere redux-persist med Redux Toolkit og TypeScript på? Frem til nå har jeg brukt dette.

import { configureStore } from '@reduxjs/toolkit'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'

import App from './App'
import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  version: 1,
  whitelist: [userReducer],
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
 reducer: persistedReducer,
 devTools: process.env.NODE_ENV !== 'production',
 middleware: [thunk]
})

let persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

Svar #1

Jeg bruker redux toolkit og typescript, min butikkonfigurasjon ser slik ut:

import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistStore } from 'redux-persist';

import reducer from './rootReducer';

const devToolsCompose = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;

export const store = configureStore({
  reducer,
  devTools: { trace: true, traceLimit: 25 },
  middleware: [
    ...getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
      }
    })
  ]
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const persistor = persistStore(store);

Redux Toolkit har dokumentasjon for TypeScript her: https://redux-toolkit.js.org/usage/usage-with-typescript

Svar #2

    /* copy link to see my solution:
    https://extreme-amethyst-885.notion.site/redux-persist-with-typescript-18cd5db1d68043ba81ac1b63fd64084c?pvs=4

store/hooks.ts
store/reducers.ts
store/store.ts

persist Gate hydration error handle*/
import { persistor, store } from "./store/store";
import { PersistGate } from "redux-persist/integration/react";

function App() {
return (
    <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              {() => (
                <YourApp />
              )}
            </PersistGate>
    </Provider>
)
export default App;