Еще один встречный пример.
NgRx - это реализация Redux в Angular с использованием RxJS. Это гениально. Он сочетает в себе мощь Redux и RxJS и помогает создавать масштабируемую архитектуру при работе с большими приложениями.
Но недостатком является то, что для этого требуется много шаблонного кода.
Вот где действительно помогает объединение в профсоюзы.
Я использую unionize в течение последних нескольких месяцев на большой и сложной кодовой базе. У этого приложения были некоторые уникальные требования, и управление состоянием в NgRx действительно помогло. Использование unionize помогло сохранить согласованный и управляемый код NgRx.
Я создал небольшой базовый блок, чтобы продемонстрировать, как можно использовать unionize с NgRx, здесь: https://github.com/darrenmothersele/ngrx-unionize-counter
Давайте рассмотрим код.
Главный помощник unionize создает тип объединения из вашего списка действий:
export const CounterActions = unionize({
increaseValue: ofType<number>(),
decreaseValue: ofType<number>()
}, 'type', 'payload');
Сохраните тип для удобства использования в функции редуктора:
export type CounterActionsType = typeof CounterActions._Union;
Используйте помощник match() при создании функции редуктора:
export function counterReducer(state: CounterState = initialValue, action: CounterActionsType): CounterState {
return CounterActions.match({
// your action implementations go here#
// each one returns a new state
}, () => state)(action);}
Ознакомьтесь с полным кодом в образце репозитория для получения более подробной информации и в readme для объединения в единое целое.
