如何在 redux-persist 中仅将一部分 redux 存储持久化到本地存储中答案

【问题标题】：How to persist only a subset of redux store into the local storage in redux-persist如何在 redux-persist 中仅将一部分 redux 存储持久化到本地存储中
【发布时间】：2021-08-29 03:09:53
【问题描述】：

我有两个减速器 - userSignup 和 userLogin。我必须在页面刷新之间持久化存储，所以我使用 redux 持久化。但是，我不想将整个 userSignup 和 userLogin 状态存储到 localStorage 中，我只想存储其中的一部分。

UserSignupReducer.js

import {
  USER_SIGNUP_SUCCESS,
  USER_SIGNUP_FAILED,
  USER_OTP_VERIFICATION_FAILED,
  USER_OTP_VERIFICATION_SUCCESS,
  SET_LOADING_TRUE,
  SET_LOADING_FALSE,
} from './UserSignupTypes';

const initialState = {
  loading: false,
  userData: {},
  signupErrors: {},
  signupSuccess: false,
  OTPSuccess: false,
  OTPErrors: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_LOADING_TRUE:
      return {
        ...state,
        loading: true,
      };
    case SET_LOADING_FALSE:
      return {
        ...state,
        loading: false,
      };
    case USER_SIGNUP_SUCCESS:
      return {
        ...state,
        signupSuccess: true,
        signupErrors: {},
        userData: action.payload,
        OTPErrors: '',
      };
    case USER_SIGNUP_FAILED:
      return {
        ...state,
        signupSuccess: false,
        signupErrors: action.payload,
      };
    case USER_OTP_VERIFICATION_SUCCESS:
      return {
        ...state,
        OTPSuccess: true,
        OTPErrors: '',
      };
    case USER_OTP_VERIFICATION_FAILED:
      return {
        ...state,
        OTPErrors: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

这里的状态有很多变量。但我不想将错误、加载、.. 持久化到 localStorage 中（因为即使用户在刷新页面后也看到错误，UX 也不会很好）。我只想将 userData 保存到 localStorage 中。然后我可以按照 redux persist 文档中的说明使用 state reconciler = automergeLevel1 来获取持久后的新状态。

同样在 userLoginReducer.js 中

import {
  SET_LOADING_TRUE,
  SET_LOADING_FALSE,
  USER_LOGIN_SUCCESS,
  USER_LOGIN_FAILED,
} from './UserLoginTypes';

const initialState = {
  loading: false,
  isloggedIn: false,
  loginErrors: {},
  username: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_LOADING_TRUE:
      return {
        ...state,
        loading: true,
      };
    case SET_LOADING_FALSE:
      return {
        ...state,
        loading: false,
      };
    case USER_LOGIN_SUCCESS:
      return {
        ...state,
        isLoggedIn: true,
        username: action.payload,
        loginErrors: {},
      };
    case USER_LOGIN_FAILED:
      return {
        ...state,
        isLoggedIn: false,
        loginErrors: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

我只想将 isLoggedIn 持久化到 localStorage 中。

rootReducer.js

import { combineReducers } from 'redux';
import userSignupReducer from './UserSignup/UserSignupReducer';
import userLoginReducer from './UserLogin/UserLoginReducer';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const rootReducer = combineReducers({
  userSignup: userSignupReducer,
  userLogin: userLoginReducer,
});

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['userSignup', 'userLogin'],
};

export default persistReducer(persistConfig, rootReducer);

store.js

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './rootReducer';
import { composeWithDevTools } from 'redux-devtools-extension';
import { persistStore } from 'redux-persist';
import thunk from 'redux-thunk';

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

export const persistor = persistStore(store);

请针对此问题提出任何补救措施。提前谢谢。

【问题讨论】：

标签： reactjs redux redux-persist

【解决方案1】：

为 redux-persist 模块 redux-persist-transform-filter 使用过滤器转换器。

安装：

npm install redux-persist-transform-filter

在您的 rootReducer.js 中：

...
import { createFilter } from "redux-persist-transform-filter";

...

const saveUserLoginSubsetFilter = createFilter("userLogin", ["isLoggedIn"]);

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['userSignup', 'userLogin'],
  transforms: [saveUserLoginSubsetFilter]
};

export default persistReducer(persistConfig, rootReducer);

您正在创建的常量 saveUserLoginSubsetFilter 带有两个参数，第一个是您要引用的 reducer 的名称，第二个是您要保留的字段数组。确实创建了一个白名单实体的子集来持久化。

然后将 transforms 数组添加到 persistConfig 中，它应该可以工作了。

【讨论】：