[英]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.