Redux middleware with configureStore: Next is not a function

Question

I'm trying to add a custom middleware to my Redux (I'm using it with configureStore)

const reducer = {
    layout: layout,
    login: login,
    companies: companies,
    services: services,
    platforms: platforms,
    report: report,
    users: users,
    stats: stats,
    version: version,
}

const logger = store => next => action => {
    console.log('dispatching', action)
    let result = next(action)
    console.log('next state', store.getState())
    return result
  }

const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger())
});

But I get Uncaught TypeError: next is not a function

Cannot find a working example with configureStore.

The packages that I'm using are:

"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1",

Update #1

I followed hint of

as following

const reducer = {
    layout: layout,
    login: login,
    companies: companies,
    services: services,
    platforms: platforms,
    report: report,
    users: users,
    stats: stats,
    version: version,
    wizard: wizard,
}

const logger = store => next => action => {
    console.log('dispatching', action)
    let result = next(action)
    console.log('next state', store.getState())
    return result
}

const middlewareLogger = logger(store)(next)(action);

const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middlewareLogger())
});

export default store;

but i get

src/reducers/index.js
  Line 33:40:  'next' is not defined    no-undef
  Line 33:46:  'action' is not defined  no-undef

sineverba · Accepted Answer · 2022-07-18 07:46:00Z

-1

One minute after, I found solution, thanks to this post: Why does it says that 'next' is not defined in redux middleware code. Is next method of middleware deprecated?

Error was I'm calling logger() instead of logger.

So, I did't pass any arguments to logger.

Final working code:

const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
});

edited Jul 18, 2022 at 7:46

answered Jul 17, 2022 at 17:47

sineverba

5,1828 gold badges49 silver badges99 bronze badges

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

2 Comments

krishnaacharyaa Over a year ago

Your solution doesn't match the question asked

sineverba Over a year ago

My solution compiles, works and finally I got what I need.

Collectives™ on Stack Overflow

Redux middleware with configureStore: Next is not a function

Update #1

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update #1

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related