-2

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
  • 5,059
  • 7
  • 39
  • 84

1 Answers1

-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)
});
sineverba
  • 5,059
  • 7
  • 39
  • 84