如何在redux-persist中使用多个存储选项

6qftjkof 于 2023-06-30 发布在其他

关注(0)|答案(1)|浏览(129)

我有这个redux设置，我有一些reducer用于auth ruducer，我想使用localstorage，对于rest reducer，我想使用session storage。怎么做

import { configureStore } from "@reduxjs/toolkit";
    import { persistStore, persistReducer, createTransform } from "redux-persist";
    import rootReducer from "./reducers";
    import { setupListeners } from "@reduxjs/toolkit/dist/query";
    import { parse, stringify } from "flatted";
    import { apiSlice } from "apiHelpers/ApiSlice";
    import sessionStorage from "redux-persist/lib/storage/session";
    
  
    
    const persistConfig = {
      key: "root",
      storage: sessionStorage,
      whitelist: [
        "cart",
        
      ],
    };
    
    const sagaMiddleware = createSagaMiddleware();
    
    const persistedReducer = persistReducer(persistConfig, rootReducer);
    
    const store = configureStore({
      reducer: persistedReducer,
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          sentryReduxEnhancer,
          serializableCheck: false,
        })
      
    });
    
    
    
    setupListeners(store.dispatch);
    export const persistor = persistStore(store);
    export default store;

redux

来源：https://stackoverflow.com/questions/76545975/how-to-use-multiple-storage-option-in-redux-persist

1条答案

按热度按时间

2eafrhcq1#

您可以使用嵌套持久化
嵌套持久化对于包含不同的存储适配器、代码拆分或深度过滤非常有用。
为auth reducer设置本地存储，通过blacklist选项为root reducer设置会话存储excludeauth reducer。
例如

import localStorage from 'redux-persist/lib/storage';
import storageSession from 'redux-persist/lib/storage/session';
import { combineReducers, createStore } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';

const authPersistConfig = {
  key: 'auth',
  storage: localStorage,
};

const rootPersistConfig = {
  key: 'root',
  storage: storageSession,
  blacklist: ['auth'],
};

const authReducer = (state = { name: 'auth' }) => state;
const otherReducer = (state = { name: 'other' }) => state;

const rootReducer = combineReducers({
  auth: persistReducer(authPersistConfig, authReducer),
  other: otherReducer,
});

const persistRootReducer = persistReducer(rootPersistConfig, rootReducer);

export const store = createStore(persistRootReducer);
export const persistor = persistStore(store);

本地存储中的数据：

localStorage.getItem('persist:auth')
// "{"name":"\"auth\"","_persist":"{\"version\":-1,\"rehydrated\":true}"}"

会话存储中的数据：

sessionStorage.getItem('persist:root')

// "{"other":"{\"name\":\"other\"}","_persist":"{\"version\":-1,\"rehydrated\":true}"}"

stackblitz

赞(0）回复(0）举报 2023-06-30

我来回答

如何在redux-persist中使用多个存储选项

1条答案

相关问题

热门标签

最新问答