getting TypeError: middleware is not a function in the terminal

650 views Asked by At

I'm trying to implement a simple asynchronous API call in my Javascript application with Redux.

Folder1\REDUX-DEMO\node_modules\redux\dist\cjs\redux.cjs:407
 const chain = middlewares.map((middleware) => middleware(middlewareAPI));

 TypeError: middleware is not a function                        ^       

And I'm persistently receiving the aforementioned error in the terminal

Below is the relevant part of the code for the application

const redux = require("redux");
const createStore = redux.createStore;
const applyMiddleware = redux.applyMiddleware;
const thunkMiddleware = require("redux-thunk").default;
const reduxLogger = require("redux-logger");
const logger = reduxLogger.createLogger();
const promiseMiddleware = require('redux-promise').default;
const axios = require("axios");

//thecodeinbetween...

const middleware = applyMiddleware(thunkMiddleware, promiseMiddleware, logger);
const store = createStore(reducer, middleware);
store.subscribe(() => {
  console.log(store.getState());
});
store.dispatch(fetchUsers());

I've tried installing and reinstalling the dependencies

"dependencies": {
    "axios": "^1.6.2",
    "immer": "^10.0.3",
    "redux": "^5.0.0",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^3.1.0"

And I've applied all the necessary corrections I could think of from what I found on the internet. Still getting the same error

1

There are 1 answers

0
phry On BEST ANSWER

You need to do const thunkMiddleware = require("redux-thunk").thunk;, not const thunkMiddleware = require("redux-thunk").default; with redux-thunk since version 3.

But apart from that, please be aware that you are using a pre-2019 style of Redux, and Redux has changed considerably since then, to the point where you write less than 1/3 of the code and don't have any of all the setup you are doing here. I'd highly recommend you to follow the official Redux tutorial.