Javascript 如何在页面刷新时保持redux状态

按照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中设置了状态或出现了一些错误

---

另外，您能否确认状态首先保存在localStorage中？

意识到我没有正确使用redux开发工具。遵循丹·阿布拉莫夫的教程会有所帮助，但一个很好的建议是记录错误，这是我意识到自己工作正常的地方。我的错误是我使用的是redux检查器，而不是日志监视器

您是否可以测试本地存储是否按预期工作？例如，在try-catch代码块中使用

throw err

，而不是返回undefined@Kunukn我在每个catch代码上都放置了一个console.log（err），但在刷新页面后，控制台日志中似乎根本没有日志。我真傻，我一直在错误地使用开发工具，我真诚的道歉@谢谢你的帮助！当我登录时，console.log返回localStorage项。但当我刷新时，控制台中根本没有显示任何内容。也许商店没有在刷新时重新加载？看起来很奇怪。我真傻，我一直在错误地使用开发工具，我真诚的道歉！谢谢你的帮助！没有问题，很高兴您找到了解决方法，只需更新您的问题，以便其他寻找相同问题的人可以找到解决方法：）

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
  }
};