如何仅将 redux 存储的一个子集持久化到 redux-persist 中的本地存储中

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 中。然后我可以使用 state reconciler = automergeLevel1，如 redux persist docs 中所述，在 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，它应该可以工作。

如何仅将 redux 存储的一个子集持久化到 redux-persist 中的本地存储中

How to persist only a subset of redux store into the local storage in redux-persist

reactjs

redux

redux-persist