Redux applyMiddleware多次使用不可变数组的问题

Question

我创建了一个 Next.js 和 Redux 应用程序。我使用多个中间件进行 redux。我有用于检查开发环境和应用开发中间件的 bindMiddleware 函数。

import { createStore, applyMiddleware, combineReducers } from "redux";
import thunkMiddleware from "redux-thunk";
import promiseMiddleware from "redux-promise-middleware";

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    const loggerMiddleware = require("redux-logger");
    return composeWithDevTools(
      applyMiddleware([...middleware, loggerMiddleware])
    );
  }
  return applyMiddleware(...middleware);
};

bindMiddleware([thunkMiddleware, promiseMiddleware])

由于此代码，我的应用无法运行：

return composeWithDevTools(
    applyMiddleware([...middleware, loggerMiddleware])
);

如果我使用此代码而不是错误代码，它不会报错。

return composeWithDevTools(
    applyMiddleware(...middleware)
);

！！！已修复！！！

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    const { logger } = require("redux-logger"); // edited
    return composeWithDevTools(applyMiddleware(...middleware, logger)); // edited
  }
  return applyMiddleware(...middleware);
};

Answer 1

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    const { logger } = require("redux-logger"); // edited
    return composeWithDevTools(applyMiddleware(...middleware, logger)); // edited
  }
  return applyMiddleware(...middleware);
};