如何使用 redux-toolkit 配置 redux-persist? [英] How to configure redux-persist with redux-toolkit?
本文介绍了如何使用 redux-toolkit 配置 redux-persist?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经使用传统的 react-redux 设置配置了 redux-persist,如下所示:
I have configured redux-persist with a traditional react-redux setup like this:
onst persistConfig = {
key: 'root',
storage,
whitelist: ['todos'],
};
const persistedReducer = persistReducer(persistConfig, reducer);
const store = createStore(
persistedReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
const persistor = persistStore(store);
// wrapper
const StateProvider = ({ children }) => {
return (
<Provider store={store}>
<PersistGate loading={<div>Loading...</div>} persistor={persistor}>
{children}
</PersistGate>
</Provider>
);
};
但是,我如何使用 redux-toolkit 配置它?到目前为止,我已经尝试过这个:
But, how can I configure it with redux-toolkit? So far I have tried this:
const persistedReducer = persistReducer(persistConfig, todoreducer);
const store = configureStore({
reducer: {
todos: persistedReducer,
},
});
const persistor = persistStore(store);
// wrapper
const StateProvider = ({ children }) => {
return (
<Provider store={store}>
<PersistGate loading={<div>Loading...</div>} persistor={persistor}>
{children}
</PersistGate>
</Provider>
);
};
但是,它不起作用.我无法通过 const todos = useSelector(state => state.todos);
But, It is not working. I can't get the todos
by const todos = useSelector(state => state.todos);
它返回未定义.
推荐答案
store.js
import {configureStore} from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage'
import {combineReducers} from "redux";
import { persistReducer } from 'redux-persist'
import thunk from 'redux-thunk'
const reducers = combineReducers({
//...
});
const persistConfig = {
key: 'root',
storage
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
middleware: [thunk]
});
export default store;
索引/App.js
import store from './app/store';
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'
let persistor = persistStore(store);
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App/>
</PersistGate>
</Provider>,
这篇关于如何使用 redux-toolkit 配置 redux-persist?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文