redux-promise:未捕获的 TypeError:中间件不是函数

Posted

技术标签:

【中文标题】redux-promise:未捕获的 TypeError:中间件不是函数【英文标题】:redux-promise: Uncaught TypeError: middleware is not a function 【发布时间】:2017-09-24 18:48:28 【问题描述】:

我正在构建一个带有反应的网页。我使用了 udemy 的教程,作者使用 redux promise 进行休息调用。它在课程中有效。

在我自己的项目中,我设置了相同的所有内容,当我尝试使用 redux-promise 中间件创建商店时,启动网站时出现以下错误:

Uncaught TypeError: middleware is not a function
at http://localhost:3000/index.js:34412:16
at Array.map (native)
at http://localhost:3000/index.js:34411:27
at Object.<anonymous> (http://localhost:3000/index.js:15744:70)
at Object.<anonymous> (http://localhost:3000/index.js:15748:27)
at Object.options.path (http://localhost:3000/index.js:15749:30)
at __webpack_require__ (http://localhost:3000/index.js:658:30)
at fn (http://localhost:3000/index.js:86:20)
at Object.<anonymous> (http://localhost:3000/index.js:35118:18)
at __webpack_require__ (http://localhost:3000/index.js:658:30)

错误出现在这里(根据控制台):

applyMiddleware.js:39

如果我使用另一个中间件,比如 redux-thunk,它可以工作(好吧,除了我的休息调用,但那是另一回事了)。有什么建议为什么会发生此错误?

我正在运行的版本:

"axios": "^0.15.3",
"es6-promise": "^4.0.5",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"redux": "^3.6.0",
"redux-promise": "^0.5.3"

我的 index.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import  createStore, applyMiddleware  from 'redux';
import Router, Route, browserHistory, IndexRoute from 'react-router';
import thunk from 'redux-thunk';
import reduxPromise from 'redux-promise';

import reducers from './app/reducers';
import routes from './routes';

import './index.scss';

const createStoreWithMiddleware = applyMiddleware(reduxPromise)(createStore);

ReactDOM.render(
  <Provider store=createStoreWithMiddleware(reducers)>
    <Router history=browserHistory routes=routes />
  </Provider>
  ,document.getElementById('root')
);

您是否需要更多信息(如减速器、操作等)?

调用此行时出现错误:

<Provider store=createStoreWithMiddleware(reducers)>

【问题讨论】:

【参考方案1】:

或者只是: 从'redux-promise'导入承诺; // 从 redux-promise 模块导入默认导出并命名为 'promise'

【讨论】:

【参考方案2】:

这对我有用:

import * as promise from 'redux-promise'

【讨论】:

【参考方案3】:

applymiddleware 是一个存储增强器,作为 arg 传入以创建存储。

让代码运行的最简单方法是替换以下内容:

const createStoreWithMiddleware = applyMiddleware(reduxPromise)(createStore);

到:

const middleware = [ reduxPromise ];
const store = createStore(reducer, applyMiddleware(...middleware));

如您所见,您必须将根 reducer 作为第一个参数传递给 createStore。

【讨论】:

嗯,我更改了 index.tsx 中的代码并设置了 但我仍然遇到同样的错误。 啊,所以你使用的是打字稿。不要使用 es6 导入语法,而是尝试使用: const reduxPromise = require("redux-promise"); 你先生,值得一个大饼干 :-) 现在像魅力一样工作,非常感谢! 很高兴能帮上忙 :)

以上是关于redux-promise:未捕获的 TypeError:中间件不是函数的主要内容,如果未能解决你的问题,请参考以下文章

使用 redux-promise 调用 API 时 Redux 状态未更新

Reducer 在使用 redux-promise 和 axios 时返回 undefined

如何在 reducer 中处理 Redux 的 redux-promise 中间件 AJAX 错误?

使用 redux-promise 处理 redux 错误的正确方法

Redux-Promise 不会阻止被拒绝的 Promise

Gatsby.js 和 redux-promise 中间件