Why am I getting `middleware is not a function' in redux?

Question

I am setting up a simple React/Redux app. Here is my setup:

var {createStore, applyMiddleware } = require('redux')
var thunkMiddleware = require('redux-thunk')
var store = createStore(
  reducers,
  applyMiddleware(thunkMiddleware)
)

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <HashRouter>
          <div className="app">
            <Route exact path='/' component={Home}/>
            <Route path='/Test' component={Test}/>
          </div>
        </HashRouter>
      </Provider>
    );
  }
}

Also, here are my reducers:

var {combineReducers} = require('redux')

const carlist = (state=[], action) => {
  switch (action.type){
    case 'LOAD':
      return action.test
    default:
      return state
  }
}
module.exports = combineReducers({carlist})

When I run my app, I get this error:

applyMiddleware.js:39 Uncaught TypeError: middleware is not a function

What am I missing?

One possibility is that you forgot npm install --save redux-thunk ? — nwales
– nwales, Commented May 20, 2017 at 2:07
No, I thought about that and I checked. I even added a console.log(thunkMiddleware) for a sanity check and it logged out — jhamm
– jhamm, Commented May 20, 2017 at 2:09

tgallacher · Accepted Answer · 2017-05-21 22:12:42Z

5

the problem looks like it might be here:

var thunkMiddleware = require('redux-thunk')

Your middleware -- here thunkMiddleware -- is not a function, suggesting that it is not being pulled from the package. You should try:

var thunkMiddleware = require('redux-thunk').default

Or, try using ES6 module syntax (since you are already using ES6 features):

import thunkMiddleware from 'redux-thunk'

answered May 21, 2017 at 22:12

tgallacher

1,6822 gold badges11 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lukas · Accepted Answer · 2018-01-12 13:06:35Z

2

I had this error when using redux-logger

I had just upgraded my packages and change

import createLogger from 'redux-logger'

to

import { createLogger } from 'redux-logger'

answered Jan 12, 2018 at 13:06

Lukas

10.5k17 gold badges82 silver badges129 bronze badges

Comments

sawinfotech · Accepted Answer · 2024-04-09 09:42:28Z

0

Here is what worked for me - First reference the redux-thunk

const thunkMiddleware = require('redux-thunk')

Secondly, when adding middleware use following syntax.

const store = createStore(reducer, applyMiddleware(thunkMiddleware.thunk))

Here are version details i'm working on -

"redux-thunk": "^3.1.0"

"redux": "^5.0.1",

Hope that helps

answered Apr 9, 2024 at 9:42

sawinfotech

231 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Why am I getting `middleware is not a function' in redux?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related