Syntactic problems with Redux middleware when adding redux-persist

Question

I have currently the following store creation function

export const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(saga).concat(thunk)
});

I try to add redux-persist to this app. When doing it up to general instruction I have received error which informed that some actions can not be serialised. It seems that solution is

middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),

However I can not realize how both could be combined syntactically.

 middleware: getDefaultMiddleware => getDefaultMiddleware().concat(saga).concat(thunk).concat(serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      })
});
is not valid. Could I ask someone for assistance?

Answer 1

middleware: (getDefaultMiddleware) =>
    // here you start calling `getDefaultMiddleware`
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    })
    // here that call to getDefaultMiddleware is finished - everything until here is a method argument
    .concat(saga)
,

and you really do not need .concat(thunk) as redux-thunk is included in getDefaultMiddleware - it's a RTK default.

Also, please note that we recommend sagas only for extremely complicated asynchronous logic. In most modern applications you probably will not have any need for redux-saga.
Usually you should go with thunks and if that is not enough, Redux Toolkit now ships with the listener middleware that allows you to do most advanced things sagas were used for before. But for normal data fetching, createApi or createAsyncThunk should be enough.