[英]How to write redux-persist in redux toolkit along with TypeScript
我一直在我的下一個 js 應用程序中使用 Redux Persist,但現在我想使用 redux 工具包和類型腳本。 在 redux 工具包中獲得了編寫 redux-persist 的語法,但無法找到特定於 typescript 的任何內容。 請任何人提出一種使用 redux 工具包和 typescript 實現 redux-persist 的方法。 直到現在使用這個。
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')
)
我使用 redux 工具包和 typescript,我的商店配置如下所示:
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 工具包有 typescript 的文檔: https://redux-toolkit.js.org/usage/usage-with-typescript
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.