reactjs - 如何使用带有 redux-persist 的反应工具包清除任何持久状态

Question

在官方文档中，它说要添加一个额外的 reducer 来清除当前切片的状态，但是到处都没有一个明确的例子

import { PURGE } from "redux-persist";

extraReducers: (builder) => {
  builder.addCase(PURGE, (state) => {
    customEntityAdapter.removeAll(state);
  });
}

如何导入或从哪里得到customEntityAdapter，当我调用persistorObjectthen purge 时它显示错误，任何人都可以给我一些启示，谢谢我感谢带有https://redux-toolkit.js.org的 redux-toolkit 的清晰示例/usage/usage-guide#use-with-redux-persist

标签： reactjsredux-toolkitredux-persist

Answer 1

customEntityAdapter，根据它的名字，应该是由createEntityAdapter创建的。

生成一组用于执行 CRUD 操作的预构建化简器和选择器的函数

使用与否与使用无关redux-persist。由于您的问题是关于如何使用 RTK 和redux-persist，以及它的清除状态功能，为了简化问题，我不会使用createEntityAdapter.

关于如何使用 RTKredux-persist和.purge()方法的示例persistor。

App.tsx：

import "./styles.css";
import { persistor } from "./store";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onClick={() => {
          persistor.purge();
        }}
      >
        purge state
      </button>
    </div>
  );
}

reducers.ts：

import { combineReducers } from "@reduxjs/toolkit";

const rootReducer = combineReducers({
  user: (state = { name: "teresa teng" }, action) => state
});

export default rootReducer;

store.ts：

import { configureStore } from "@reduxjs/toolkit";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER
} from "redux-persist";
import storage from "redux-persist/lib/storage";

import rootReducer from "./reducers";

const persistConfig = {
  key: "root",
  version: 1,
  storage
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
      }
    })
});

let persistor = persistStore(store);

export { store, persistor };

index.tsx：

import { render } from "react-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

import { store, persistor } from "./store";

import App from "./App";

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

状态保留在默认存储引擎中 - localStorage：

您可以单击按钮，从 中清除状态localStorage。

密码箱