将 redux-toolkit 更新到 2.0.1 时，configureStore 中间件出现问题

Question

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat([
      createStateSyncMiddleware({
        channel: "ketchcloth",
        broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
        blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
      })
    ])
})

这里，我得到了错误

TS2322：类型“(getDefaultMiddleware: GetDefaultMiddleware) => Tuple<[ThunkMiddleware, ...Middleware<{}, any, Dispatch>[]]>”不可分配给类型“(getDefaultMiddleware: GetDefaultMiddleware) => Tuple”。 类型“Tuple<[ThunkMiddleware，...Middleware<{}, any, Dispatch>[]]>”不可分配给类型“Tuple”。 类型“[ThunkMiddleware, ...Middleware<{}, any, Dispatch>[]]”不可分配给类型“Middlewares”。 输入 'ThunkMiddleware | Middleware<{}, any, Dispatch>' 不可分配给类型'Middleware<{}, any, Dispatch>'。 类型“ThunkMiddleware”不可分配给类型“Middleware<{}, any, Dispatch>”。 参数“next”和“next”的类型不兼容。 类型“未知”不可分配给类型“T”。 “T”可以用与“未知”无关的任意类型实例化。 48 | 48导出常量存储：AppStore = configureStore({ 49 | 49减速器：rootReducer， 50 | 50中间件：（getDefaultMiddleware）=> | ^^^^^^^^^^ 51 | 51获取默认中间件({ 52 | 52可序列化检查：假， 53 | 53不可变检查：假

我已经尝试过

enhancers(getDefaultEnhancers)

，但我没有为这个特定代码得到任何正确的解决方案。

Answer 1

我相信您只需直接将中间件而不是中间件数组传递给

getDefaultMiddleware.concat

方法。

const stateSyncMiddleware = createStateSyncMiddleware({
  channel: "ketchcloth",
  broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
  blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
});

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat(stateSyncMiddleware, /* other middlewares */);
});

或将数组展开为

.concat

const stateSyncMiddleware = createStateSyncMiddleware({
  channel: "ketchcloth",
  broadcastChannelOption: { type: "localstorage", webWorkerSupport: false },
  blacklist: ['persist/PERSIST', 'persist/PURGE', 'persist/REHYDRATE']
});

export const store: AppStore = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false
    }).concat(...[stateSyncMiddleware, /* other middlewares */])
});

Answer 2

这是在 React JS 应用程序中实现/配置 React Redux 存储的正确方法。您可以从其官方文档中阅读有关 React Redux 的更多信息。

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(
  serializableCheck: false,
  immutableCheck: false).concat(logger),
  devTools: process.env.NODE_ENV !== 'production',
  preloadedState,
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers({
      autoBatch: false,
    }).concat(batchedSubscribe(debounceNotify)),
})