[英]How to keep redux state when page refreshed
按照Dan Abramov的方法将状态存储在localStorage中,在执行页面刷新后,我无法保留应用程序的现有状态。 使用redux开发工具,当我登录时,将对状态进行身份验证并存储用户。 刷新页面后,日志将清除并返回“ @@ INIT”
我的index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import rootReducer from './reducers/rootReducer';
import { loadState, saveState } from './localStorage';
import { BrowserRouter } from 'react-router-dom';
import { composeWithDevTools } from 'redux-devtools-extension';
const middleware = [thunk];
const composeEnhancers = composeWithDevTools({
thunk
});
const persistedState = loadState();
const store = createStore(
rootReducer,
persistedState,
composeEnhancers(applyMiddleware(...middleware))
);
store.subscribe(() => {
// saves states to localStorage everytime state changes
saveState(store.getState());
});
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
registerServiceWorker();
localStorage.js的代码
export const loadState = () => {
try {
const serializedState = localStorage.getItem('state');
if (serializedState === null) {
return undefined;
}
return JSON.parse(serializedState);
} catch (err) {
return undefined;
}
};
export const saveState = state => {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
console.log('this is the state', state);
} catch (err) {
// Ignore errors
}
};
//忽略错误
不要忽略这些错误,至少要记录它们,以查看状态是在本地存储中设置还是给出一些错误。
还可以首先确认状态已保存在localStorage中吗?
意识到我没有正确使用redux开发工具。 遵循Dan Abramov教程会有所帮助,但一个不错的建议是记录错误,这是我意识到我可以正常工作的地方。 我的错是我使用的是redux检查器,而不是日志监视器!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.