React Redux 状态在页面刷新时丢失

React Redux 状态在页面刷新时丢失的问题

javascript
// 在页面刷新时将状态存储到本地存储中
window.addEventListener('beforeunload', () => {
  const state = store.getState();
  localStorage.setItem('reduxState', JSON.stringify(state));
});
// 在应用程序初始化时从本地存储中恢复状态
const persistedState = localStorage.getItem('reduxState')
  ? JSON.parse(localStorage.getItem('reduxState'))
  : {};
const store = createStore(rootReducer, persistedState);

javascript
// 引入必要的库和组件
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
// 定义 Redux reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
// 创建 Redux store
const store = createStore(counterReducer);
// 在页面刷新时将状态存储到本地存储中
window.addEventListener('beforeunload', () => {
  const state = store.getState();
  localStorage.setItem('reduxState', JSON.stringify(state));
});
// 在应用程序初始化时从本地存储中恢复状态
const persistedState = localStorage.getItem('reduxState')
  ? JSON.parse(localStorage.getItem('reduxState'))
  : {};
store.subscribe(() => {
  console.log(store.getState());
});
// 渲染根组件
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);