Search code examples
reactjsreduxreact-reduxredux-thunk

TypeError: middleware is not a function


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

Solution

  • 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)
    )