TypeError: middleware is not a function TypeError: middleware is not a function reactjs reactjs

TypeError: middleware is not a function


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


I don't see react and react-dom in your dependencies, and it is not included in the import statements.

Let me provide you with an example of how I did an App recently, also using the redux developer tools which is amazing.

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

I would figure that you just need to add logger, after reduxThunk. And if you have already combined your reducers, then just provide reducers instead of combineReducers.

Regards,Rafael


I was getting the same error 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));