Search code examples
reactjsreduxredux-promise

redux-promise: Uncaught TypeError: middleware is not a function

I am building a webpage with react. I used a tutorial from udemy where the author used redux promise for rest calls. It worked in the course.

In my own project, I set up everything the same and when I try to create the store with the redux-promise middleware, I get the following error when launching the website:

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)

The error comes up here (according to the console):

applyMiddleware.js:39

If I use another middleware, like redux-thunk, it works (well, except my rest calls but that is another story). Any suggestions why this error happens?

Versions I am running:

"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"

My 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')
);

Dou you need more informations (like the reducers, actions, etc.)?

The error comes up, when this line is called:

<Provider store={createStoreWithMiddleware(reducers)}>
Solution

  • applymiddleware is a store enhancer that is passed in as an arg to create store.

    The simplest way of getting your code to run would be to replace the following:

    const createStoreWithMiddleware = applyMiddleware(reduxPromise)(createStore);

    to:

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

    As you can see you must to pass in your root reducer as the first argument to createStore.