TypeError: middleware is not a function

James Solomon Belda picture James Solomon Belda · Oct 22, 2017 · Viewed 19.6k times · Source

I'm trying to apply redux in my reactjs app. I can't proceed because of these errors:

enter image description here

enter image description here

I'm sure that I already installed all the dependencies that I need. Here is a relevant part of my 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",
}

Here is a part of my index.js that implements redux

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

Answer

Bal&#225;zs &#201;des picture Balázs Édes · Oct 22, 2017

According to the docs you are mixing up the usage of redux-logger

You either need to import the specific createLogger function

import { createLogger } from 'redux-logger'

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

Or use the default import

import logger from 'redux-logger'

And then your code should be fine

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