不可变数组的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);
};