页面切换后，Redux 状态被重置

在页面切换后，Redux 状态被重置的问题通常是因为在页面切换时，Redux 的状态并没有正确地被保留下来。可以使用以下两种方法来解决这个问题：

1. 使用 Redux Persist：Redux Persist 是一个用于持久化 Redux 状态的库。它可以将 Redux 的状态保存到本地存储中，以便在页面切换后可以正确地还原状态。以下是一个示例代码：

// 安装 Redux Persist
npm install redux-persist

// 在 Redux store 中配置 Redux Persist
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// 导入你的 reducer
import rootReducer from './reducers';

// 配置 Redux Persist
const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建 Redux store
const store = createStore(persistedReducer);
const persistor = persistStore(store);

// 导出 store 和 persistor
export { store, persistor };

然后，在你的应用程序入口文件中，你可以使用 <PersistGate> 组件来包裹你的应用程序根组件，以确保 Redux 状态被正确地还原：

import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

2. 使用 React Router 的 <Route> 组件的 render 属性：如果你使用 React Router 来处理页面切换，你可以使用 <Route> 组件的 render 属性来渲染你的页面组件，并将 Redux 状态作为属性传递给页面组件。这样，在页面切换时，Redux 状态就不会被重置。以下是一个示例代码：

import { Route } from 'react-router-dom';
import { connect } from 'react-redux';

const MyPage = ({ myReduxState }) => (
  // 在页面组件中使用 myReduxState
  <div>{myReduxState}</div>
);

const mapStateToProps = (state) => ({
  myReduxState: state.myReducer.myState,
});

const ConnectedMyPage = connect(mapStateToProps)(MyPage);

const App = () => (
  <Router>
    <Route path="/mypage" render={() => <ConnectedMyPage />} />
  </Router>
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在上述示例代码中，MyPage 组件通过 mapStateToProps 函数将 Redux 状态中的 myState 映射到页面组件的 myReduxState 属性中。然后，在 <Route> 组件的 render 属性中，我们使用 ConnectedMyPage 组件来渲染页面组件，并将 myReduxState 作为属性传递给它。这样，在页面切换时，Redux 状态就会被正确地传递给页面组件，而不会被重置。