如何在 redux-persist 中仅将 redux 存储的子集持久保存到本地存储中

Question

我有两个减速器 - userSignup 和 userLogin。我必须在页面刷新之间保留存储，因此我使用 redux persist。但是，我不想将整个 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 中（因为如果用户即使在刷新页面后也看到错误，用户体验也不会很好）。我只想将 userData 保存到 localStorage 中。然后我可以使用 redux persist 文档中所述的 state reconciler = automergeLevel1 来获取 persist 后的新状态。

在 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);

请提出解决此问题的任何补救措施。预先感谢。

Answer 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 采用两个参数，第一个是您引用的减速器的名称，第二个是您想要保留的字段数组。确实创建了白名单实体的子集来持续存在。

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

Answer 2

您可以为reducer添加其他配置，例如：

const userSignupConfig = { key: '用户注册', 存储：异步存储， 白名单：[“声明您想要保留”]， }

const persistedUserSignupConfigReducer = persistReducer( 用户注册配置， 用户注册减速器， )

const rootReducer =combineReducers({ userSignup: persistedUserSignupConfigReducer, 用户登录：用户登录Reducer， });