通过 URL 输入导航时 Redux Toolkit 存储会重置，但与 React Router 导航配合使用效果良好

Question

我遇到了 Redux Toolkit 的问题，当我在浏览器的地址栏中手动输入 URL（例如 /admin）时，存储会重置回其初始状态。但是，如果我使用 React Router 的组件或 useNavigate() 在页面之间导航，存储将按预期持续存在并且不会重置。

以下是问题的细分：

当我使用 React Router Dom 在页面之间导航时，Redux 存储会保持其状态。 当我在浏览器中手动输入 URL 时，Redux 存储将重置为其初始状态。 我使用 React 和 Redux Toolkit 进行状态管理，使用 React Router 进行路由。我想在页面刷新或手动 URL 更改时保留 Redux 存储状态。

当我直接在浏览器中输入 URL 时，如何防止 Redux 存储重置？ 有没有办法让 Redux 存储在通过手动输入 URL 或刷新页面进行导航时持久存在？

当我直接在浏览器中输入 URL 时，如何防止 Redux 存储重置？ 有没有办法让 Redux 存储在通过手动输入 URL 或刷新页面进行导航时持久存在？

Answer 1

Redux 只是一个内存状态管理解决方案，当您手动更新地址栏中的 URL 时，它是对服务器和页面加载的完整请求。当前页面被转储，包括任何 React 和 Redux 状态，整个页面被重新加载，React 应用程序使用初始状态值重新安装。

使用 Redux-Persist 将 Redux 存储持久保存到长期存储，即 localStorage，并在应用程序安装时补充存储。

基本设置/示例：

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { Provider } from "react-redux";
import { PersistGate } from 'redux-persist/integration/react';
// ... import reducers ...

const persistConfig = {
  key: 'root',
  storage,
};

const rootReducer = combineReducers({
  // ... reducers ...
});
 
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  // ...any middlewares and other configuration properties...
});

export const persistor = persistStore(store);

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

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};