添加 redux-persist 时 Redux 中间件的语法问题

Question

我目前有以下开店功能

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

我尝试将 redux-persist 添加到此应用程序。在按照一般说明进行操作时，我收到错误消息，告知某些操作无法序列化。似乎解决方案是

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

但是我不知道如何在语法上将两者结合起来。

 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)
,

而且您真的不需要 .concat(thunk)，因为 redux-thunk 包含在 getDefaultMiddleware 中 - 这是默认的 RTK。

另请注意，我们仅针对极其复杂的异步逻辑推荐 sagas。在大多数现代应用程序中，您可能不需要 redux-saga.
通常你 should go with thunks and if that is not enough, Redux Toolkit now ships with the listener middleware 允许你做 sagas 以前用来做的最高级的事情。但是对于正常的数据获取，createApi或createAsyncThunk应该就足够了。

添加 redux-persist 时 Redux 中间件的语法问题

Syntactic problems with Redux middleware when adding redux-persist

persist

redux