redux 如何在persistReducers中添加大量的reducers

u7up0aaq 于 2022-11-24 发布在其他

关注(0)|答案(3)|浏览(193)

我如何在persistedReducers中添加我的3个reducers项？所以我基本上遵循了这个指南，但我不知道在LINK中这里谈论的是什么样的rootReducers ..我正在处理非序列化数据，但我真的不太关心它意味着什么，我只是想忽略它，因为我有一个非序列化数据...因为persistReducer可以忽略它，所以我使用它，但我不“我不知道如何添加3个减速器。

...
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'

const persistConfig = {
  key: 'root',
  version: 1,
  storage,
}

const persistedReducer = persistReducer(persistConfig,accountSlice,createItems,oderCardData)

// import ordersData 
const store = configureStore({
  reducer:persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

let persistor = persistStore(store)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.Fragment>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.Fragment>
);

正如您在const persistedReducer = persistReducer(persistConfig,accountSlice,createItems,oderCardData)行中看到的，我也在想象类似的内容，因为它具有类似于以下内容的特定数据名称

const persistedReducer = persistReducer(persistConfig,{
  account: accountSlice,
  itemData: createItems,
  ordersData: oderCardData
})

但是它不起作用。。没有persistReducer，我可以做这样简单的减速器

const store = configureStore({
   reducer: {
       {
           account: accountSlice,
           itemData: createItems,
           ordersData: oderCardData
       }
   }
})

它正在工作，但问题是我想忽略控制台中的不可序列化错误，有人能帮助我吗？

更新根据以下答案，我现在有这个

const persistConfig = {
  key: 'root',
  storage,
}

const itemsPersistConfig = {
  key:'items',
  storage:storage,
  blacklist:["temporary"]
}

const rootReducer = combineReducers({
  itemData: persistReducer(itemsPersistConfig, createItems),
  account: accountSlice,
  ordersData:oderCardData
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

// import ordersData 
const store = configureStore({
  reducer:persistedReducer,
  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
})

let persistor = persistStore(store)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.Fragment>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.Fragment>

它工作正常，但不可序列化数据的错误仍然存在，并且仍然没有删除......为什么我仍然不能删除它？我在这里遵循了错误的东西吗？

redux

来源：https://stackoverflow.com/questions/74216747/how-do-i-add-a-lot-of-reducers-in-persistreducers

3条答案

按热度按时间

e37o9pze1#

您可以将其添加到persist配置中redux persist支持两个选项白色名单和黑名单白名单中提到的所有reducer都将添加到persist中，而黑名单中提到的所有reducer都将不予考虑
https://github.com/rt2zz/redux-persist#blacklist--whitelist

// BLACKLIST
const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['reducerOne'] // reducerOne will not be persisted
};
 
// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['reducerTwo'] // only reducerTwo will be persisted
};

同时考虑更新配置

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
 
import rootReducer from './reducers'
 
const persistConfig = {
  key: 'root',
  storage,
}
 
const persistedReducer = persistReducer(persistConfig, rootReducer)
 
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

根部异径管将退回所有异径管

赞(0）回复(0）举报 2022-11-24

w8biq8rn2#

下面是我的解决方案：

const persistConfig = {
  key: 'root',
  storage,
}

const itemsPersistConfig = {
  key:'items',
  storage: storage,
  blacklist:["temporary"]
}

const mainReducer = persistReducer(
  persistConfig, 
  (state = initialMainState, action) => {
    switch (action.type) {
      case action1: {
        ...
        return {...state, ...}
      }
      ...
      default: 
        return state
    }
  }
)

const itemsReducer = persistReducer(
  itemsPersistConfig, 
  (state = initialItemsState, action) => {
    switch (action.type) {
      case itemsAction1: {
        ...
        return {...state, ...}
      }
      ...
      default: 
        return state
    }
  }
)

const rootReducer = combineReducers({
  main: mainReducer, 
  items: itemsReducer
})

// import ordersData 
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => [
    ...getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    })
  ],
})

let persistor = persistStore(store)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.Fragment>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.Fragment>

在此代码中，您需要定义initialMainState和initialItemsState。

赞(0）回复(0）举报 2022-11-24

ulmd4ohb3#

我不确定这是否是一种安全的方法，但您可以禁用可序列化检查

export const store = configureStore({
  reducer:persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }),
});

赞(0）回复(0）举报 2022-11-24

我来回答

redux 如何在persistReducers中添加大量的reducers

3条答案

相关问题

热门标签

最新问答