Meta reducers¶

Все определенные в Angular приложении редюсеры объединяются NgRX Store в один глобальный редюсер, который и обрабатывает все действия.

NgRx Meta Reducers это функции, вызываемые сразу после возникновения действия, но перед тем, как они будут переданы глобальному редюсеру. На практике они чаще всего используются для логирования.

Принцип работы NgRx Meta Reducers идентичен работе Middleware в Node.js.

Рассмотрим пример

logs.meta-reducer.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

export function log(
    reducer: ActionReducer<any>
): ActionReducer<any> {
    return (state, action) => {
        console.log('state', state);
        console.log('action', action);

        return reducer(state, action);
    };
}

app.module.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { reducers } from './store/reducers/index';
import { log } from './store/meta-reducers/log.meta-reducer';

@NgModule({
    imports: [
        StoreModule.forRoot(reducers),
        { metaReducers: [log] },
    ],
    // ...
})
export class AppModule {}

NgRx Meta Reducers указываются в виде массива в свойстве metaReducers объекта конфигурации, который передается вторым параметром методу StoreModule.forRoot().

В качестве входного аргумента NgRx Meta Reducers принимают редюсер, вызов которого передает обработку действия далее в хранилище.

Все NgRx Meta Reducers должны возвращать функцию, которая принимает два параметра: состояние и действие. Сама же функция должна возвращать вызов переданного редюсера.

Комментарии