Reputation: 3768
I'm having a hard time understanding redux middleware and exactly how it gets configured within the Redux store. For example, I have the following examples
const store = compose(
resetRedux('LOGOUT_USER'),
applyMiddleware(...middlewares),
)(createStore)(rootReducer, initialState);
resetRedux
is a middleware that basically resets the entire redux store when the string LOGOUT_USER
is dispatched. This works great, however, if I put a console.log
within the resetRedux
middleware, it only gets called once, which is strange, considering I'd imagine that action needs to be checked every time in order to be able to decide whether to reset the store.
export default function resetMiddleware(types = ['RESET']) {
return (next) => (reducer, initialState) => {
const resetTypes = Array.isArray(types) ? types : [types];
console.log('THIS IS ONLY CALLED ONCE??!')
const enhanceReducer = (state, action) => {
if (~resetTypes.indexOf(action.type)) {
state = undefined;
}
return reducer(state, action);
};
return next(enhanceReducer, initialState);
}
};
So, I'm curious how this is working when the console.log
is only called once.
Upvotes: 1
Views: 604
Reputation: 67627
You're confusing and conflating "middleware" and "store enhancers". The resetRedux
piece that you've written is actually a "store enhancer", not a middleware.
A real middleware would have its main body executed for every action that is dispatched. The store enhancer itself is evaluated/executed once, at the time of store creation. The reducer you're returning will be executed for every action, because you're creating a function that wraps around whatever the "real" reducer is that's provided to createStore
.
As an addendum, the Redux Tutorials#Implementation Walkthroughs section of my React/Redux links list has several articles that explain how middleware work in Redux.
Upvotes: 2
Reputation: 8940
Thats what compose
does, it takes your passed functions and create a new function that "compose" them.
Arguments
(arguments): The functions to compose. Each function is expected to accept a single parameter. Its return value will be provided as an argument to the function standing to the left, and so on. The exception is the right-most argument which can accept multiple parameters, as it will provide the signature for the resulting composed function. Returns
Returns (Function): The final function obtained by composing the given functions from right to left.
You can check the source code here
Its a typical utility in functional programming, e.g. lodash's also provide it, underscore as well
Upvotes: 1