为什么 Redux-Persist 不持久化存储

问题描述 投票:0回答:4

大家好,我在使用react(准确地说是redux)时遇到了一个问题。当我刷新页面时,redux store 也会恢复到其初始值,我用 google 搜索了这个问题,发现我必须使用

redux-persist
。然而,即使这不起作用,我认为问题出在我如何配置 redux-persist 但我可能是错的。 下面的代码是我如何进行 redux-persist 配置的。

// configureStore.js

import { createStore, applyMiddleware } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import rootReducer from "../reducers/index";

import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(
  persistedReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export const persistedStore = persistStore(store);

下面的代码展示了我如何制作

rootReducer

// index.js
import { combineReducers } from "redux";
import { reducer as formReducer } from "redux-form";

import authReducer from "./auth";
import messageReducer from "./message";
import chatroomReducer from "./chatroom";

import { LOGOUT_SUCCESS } from "../actions/authTypes";

const apiReducer = combineReducers({
  authReducer,
  messageReducer,
  chatroomReducer,
  form: formReducer,
});

const rootReducer = (state, action) => {
  if (action.type === LOGOUT_SUCCESS) {
    state = undefined;
  }
  return apiReducer(state, action);
};

export default rootReducer;

下面的代码是创建React应用程序时出现的

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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

import { store, persistedStore } from "./Redux/configureStore";

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

reportWebVitals();

谁能告诉我我的代码有什么问题吗?如果您需要更多信息,请告诉我。

reactjs redux react-redux redux-persist
4个回答
0
投票

尝试配置白名单,您必须在其中指示要存储哪些减速器。 请记住先导入减速器,然后再将它们添加到列表中

import navigation from "./reducers/navigation";

// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};


0
投票

首先,您需要从 Async 导入存储

import AsyncStorage from '@react-native-community/async-storage';

像这样使用白名单

const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
    whitelist: [
       'user'
    ],
  };

“user”是您要存储的特定根减速器


0
投票

根据这个答案,当您捕获

redux-persist
动作时,您还需要清除
LOGOUT_SUCCESS
存储。

首先需要导入合适的存储引擎,然后彻底清除。

const rootReducer = (state, action) => {
    if (action.type === SIGNOUT_REQUEST) {
        // for all keys defined in your persistConfig(s)
        storage.removeItem('persist:root')
        // storage.removeItem('persist:otherKey')

        return appReducer(undefined, action);
    }
    return appReducer(state, action);
};

0
投票

您的条件操作中需要一个 return 语句:

action.type === LOGOUT_SUCCESS
(您制作
rootReducer
的位置):

您的代码如下所示:

const rootReducer = (state, action) => {
  if (action.type === LOGOUT_SUCCESS) {
    state = undefined;
  }
  return apiReducer(state, action);
};

更新为:

const rootReducer = (state, action) => {
  if (action.type === LOGOUT_SUCCESS) {
    return state = undefined;
  }
  return apiReducer(state, action);
};
© www.soinside.com 2019 - 2024. All rights reserved.