[英]using redux-persist with redux thunk
Hey guys i was using redux thunk with nextjs and now i want to add redux-persist in my app.嘿伙计们,我在 nextjs 中使用 redux thunk,现在我想在我的应用程序中添加 redux-persist。 So initially my code is like所以最初我的代码就像
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';
export const makeStore = (initialState, options) => {
return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
};
can anyone help me with only in the setup with redux persist now ?任何人都可以帮助我只在 redux 的设置中坚持吗? I have tried some solution but didnt worked out我尝试了一些解决方案但没有解决
If you really need to persist your redux state
there are two options as far as I know: first you could use react-persist
as per your wish like this如果你真的需要保持你的redux state
,据我所知有两种选择:首先你可以像这样根据你的意愿使用react-persist
import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
key: 'reducer',
storage: storage,
whitelist: ['reducer'] // or blacklist to exclude specific reducers
};
const presistedReducer = persistReducer(persistConfig, reducer );
const store = createStore(presistedReducer,
composeWithDevTools(applyMiddleware(thunk)));
const persistor = persistStore(store);
export { persistor, store };
and then in your component
you do the following as instructed in their documentation
然后在您的component
您按照其documentation
说明执行以下操作
import { PersistGate } from 'redux-persist/integration/react';
// ... normal setup, create store and persistor, import components etc.
const App = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RootComponent />
</PersistGate>
</Provider>
);
};
or you could simply do the following without relying on a library
或者您可以简单地执行以下操作without relying on a library
import {
createStore, combineReducers, compose, applyMiddleware,
} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
function saveToLocalStorage(state) {
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
}
function loadFromLocalStorage() {
const serializedState = localStorage.getItem('state');
if (serializedState === null) return undefined;
return JSON.parse(serializedState);
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const presistedState = loadFromLocalStorage();
const store = createStore(
reducer,
presistedState,
composeEnhancers(applyMiddleware(thunk)),
);
store.subscribe(() => saveToLocalStorage(store.getState()));
export default store;
Here is the link of the article having simple but detailed steps to integrate & use the package in your existing app.这是文章的链接,其中包含在现有应用程序中集成和使用该包的简单但详细的步骤。
Usually, I follow the same structure that you have for the redux store.通常,我遵循与 redux 存储相同的结构。 This integration always works for me.这种集成总是对我有用。 So I hope this will help you out too.所以我希望这也能帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.