TypeError：中间件不是函数答案

【问题标题】：TypeError: middleware is not a functionTypeError：中间件不是函数
【发布时间】：2018-04-02 20:08:50
【问题描述】：

我正在尝试在我的 reactjs 应用中应用 redux。由于这些错误，我无法继续：

我确定我已经安装了我需要的所有依赖项。这是我的 package.json 的相关部分

"dependencies": {
   "react-redux": "^5.0.6",
   "redux": "^3.7.2",
   "redux-logger": "^3.0.6",
   "redux-promise": "^0.5.3",
   "redux-thunk": "^2.2.0",
}

这是我实现 redux 的 index.js 的一部分

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import reducers from './reducers';

const logger = createLogger();
const store = createStore(reducers,
    applyMiddleware(
        thunkMiddleware, logger
    )
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

根据docs，您正在混淆redux-logger的用法

你要么需要导入特定的createLogger函数

import { createLogger } from 'redux-logger'

const logger = createLogger({
  // ...options
});

或者使用默认导入

import logger from 'redux-logger'

然后你的代码应该没问题

const store = createStore(
  reducers,
  applyMiddleware(thunkMiddleware, logger)
)

【讨论】：

感谢您的回答！使用默认导入并将其传递给 applyMiddleware 对我有用。另外，感谢您参考文档。

【解决方案2】：

import logger from 'redux-logger';
import thunk from 'redux-thunk';
import reduxPromiseMiddleware from 'redux-promise-middleware';
import { applyMiddleware, createStore } from 'redux';

const middleware = applyMiddleware(reduxPromiseMiddleware, thunk, logger);
const store = createStore(reducer, middleware);

【讨论】：

谢谢，这对我有用。

【解决方案3】：

我在您的依赖项中没有看到 react 和 react-dom，并且它不包含在 import 语句中。

让我给你举个例子，说明我最近是如何做一个应用程序的，同时还使用了令人惊叹的 redux 开发者工具。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import authReducer from '../reducers/auth';
import urlsReducer from '../reducers/urls';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//Store creation
  const store = createStore(
    combineReducers({
      auth: authReducer,
      urls: urlsReducer
    }),
    composeEnhancers(applyMiddleware(reduxThunk))
  );

ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

我想你只需要在 reduxThunk 之后添加记录器。如果您已经组合了减速器，那么只需提供减速器而不是 combineReducers。

问候，拉斐尔

【讨论】：

【解决方案4】：

我遇到了同样的错误TypeError: middleware is not a function。

import { createStore, combineReducers, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

import math from "./reducers/mathReducer";
import user from "./reducers/userReducer";

const logger = createLogger();

export default createStore(
  combineReducers({ math, user }),
  {},
  applyMiddleware(logger, thunk)
);

用applyMiddleware(logger, thunk.default) 替换applyMiddleware(logger, thunk) 对我有用。

【讨论】：

【解决方案5】：

解决问题的最简单方法

import * as thunk from 'redux-thunk';



createStore(rootReducer, InitialState, applyMiddleware(thunk.default));

【讨论】：

【解决方案6】：

请在下面找到解决方案的代码：

const thunkMiddleware = require('redux-thunk').default;

const store = createStore(reducer, applyMiddleware(thunkMiddleware));

【讨论】：

【解决方案7】：

我试图将logger 添加到仅在开发中的中间件列表中，但搞砸了导入并收到了同样的错误。为了解决我的问题，我需要将.default 添加到require()：

const middleware = []

if (process.env.NODE_ENV === 'development') {
  middleware.push(require('redux-logger').default)
}

【讨论】：

【解决方案8】：

在我的例子中，我在 store 方法之前调用了中间件函数

【讨论】：