reactjs - 使用 redux-persist 和 redux thunk
问题描述
嘿伙计们,我在 nextjs 中使用 redux thunk,现在我想在我的应用程序中添加 redux-persist。所以最初我的代码就像
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)));
};
谁能帮助我只在 redux 的设置中坚持现在?我尝试了一些解决方案但没有解决
解决方案
如果你真的需要坚持你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 };
然后在你的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>
);
};
或者您可以简单地执行以下操作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;
推荐阅读
- c++ - C++ 中的变量或标识符到底存储在哪里?
- java - 如何在 O(1) 中选择方法
- reactjs - 如何在分页中同时设置“下一个和上一个”按钮
- codeigniter - 为什么在 URL 中没有 www 时 Codeiginiter 无法加载?
- django - 通过设置“Content-Disposition:attachment”(AWS S3 Bucket)实现“下载图像”功能
- python - 如何在python中使用BeautifulSoup在没有类名的范围内提取文本
- javascript - 通过特定键访问对象
- saml - 如何在 Okta 的属性中使用配置文件映射
- javascript - 如何在Vue JS中使用按字母顺序返回数组
- html - 如何获取html中生成的多个选择标签的ngValue