DEV Community 👩‍💻👨‍💻

Alfredo Perez
Alfredo Perez

Posted on

NGRX Workshop Notes - Meta-Reducers

  • Intercept actions before they are reduced
  • Intercept state before it is emitted
  • Can change the control flow of the Store

Alt Text

Most common use cases

  • Reset state when a signout action occurs
  • for debugging creating logger
  • to rehydrate when the application starts up

-It is like a plugin system for the store, they behave similarly to the interceptors


An example of this can be to use it in a logger

const logger = (reducer: ActionReducer<any, any>) => (state: any, action: Action) => {
    console.log('Previous State', state);
    console.log('Action', action);

    const nextState = reducer(state, action);

    console.log('Next State', nextState);
    return nextState;

export const metaReducers: MetaReducer<State>[] = [logger];
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

amirensit profile image
choubani amir

How to understand this line ?
const logger = (reducer: ActionReducer) => (state: any, action: Action) => { }
There is two "=>".
Any idea ?

docker1 profile image
Agafonov Vladislav

function accepting reducer returns function that accepts state and action and returns new state?🤷‍♂️

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!