How do I add my 3 reducers item in persistedReducers? So basically I follow this guide but I don't know what kind of rootReducers is talking about here in the LINK.. I am working with non-serializable-data but I really don't much care what it means I just want to ignore it because I have a non-serializable data...since persistReducer can ignore it so I use it but I don't know how to add 3 reducers..here is the code

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

As you see in the line const persistedReducer = persistReducer(persistConfig,accountSlice,createItems,oderCardData) I am imagining something like this also since It has certain data name like this

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

but it is not working out..without persistReducer I can do the reducer simple as this

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

and it is working but the thing is I want to ignore the non-serializable error in my console can anyone help me with this?

UPDATE Based in answer of below I have now this

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>

it is working but the error of non-serializable data is still there and still wasn't remove though...Why I can't still remove it did I follow wrong things here?

CodePudding user response：

Here is my solution:

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>

In this code, you need to define initialMainState and initialItemsState.

CodePudding user response：

You can add it in persist config. redux persist support two options white list and black list All reducers mentioned in white list will be added to persist and all reducers mentioned in black list will not considered

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
};

Also consider updating config

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 }
}

Root reducer will be returning all reducers