How can this custom redux error middleware being invoked?

Question

Here is the source code.

import {applyMiddleware, createStore} from 'redux'

const reducer = (state = initialState, action) => {
   ...
   if(action.type === 'E'){
      throw new Error("AAAAAAA")
   }
   return initialState;
}

const error = (store) => (next) => (action) => {
   try {
      next(action)
   } catch(e) {
      console.log("BBBBBB", e);
   }
}

const middleware = applyMiddleware(error);

const store = createStore(reducer, 1, middleware);

store.subscribe(() => {
    ...
})

store.dispatch({type: "E"})

The result is BBBBBB Error:AAAAAAA

I thought that redux middleware is located between store.dispatch() and reducer which is inside of the store.

When we dispatch some action to the store, store's reducer is being invoked after middleware function's next().

Am I wrong?

But how can that error middleware catch e nevertheless throw new Error("AAAAAAA") is located in reducer function?

You can see the above behavior in https://www.youtube.com/watch?v=DJ8fR0mZM44

In the video, the instructor says "The actual error never fired", but as the middleware logging the error object, failed to understand properly.

How can this custom redux error middleware being invoked?

0 Answers0