My talk about NGRX MetaReducers from Angular IL meetup 19.2

1. NGRX
MetaReducer
@eliraneliassy

2. About mySelf
• Experienced FE developer, specialised in B2C applications
• FE trainer & lecturer @ 500Tech
• Weekends FE developer @ fashbash.co

3. Let’s build a strong Angular
community together!!

6. Whats new in NGRX V7?

8. Breaking changes
ofType
import { Effect, Actions } from '@ngrx/effects';
@Injectable()
export class MyEffects {
@Effect()
someEffect$: Observable<Action> = this.actions$
.ofType(UserActions.LOGIN)
.pipe(map(() => new AnotherAction()));
constructor(private actions$: Actions) { }
}

9. Breaking changes
ofType
import { Effect, Actions, ofType } from '@ngrx/effects';
@Injectable()
export class MyEffects {
@Effect()
someEffect$: Observable<Action> = this.actions$.pipe(
ofType(UserActions.LOGIN), // use the pipeable ofType operator
map(() => new AnotherAction())
);
constructor(private actions$: Actions<UserActions>) {}
}

10. Selectors props
export const getCount = createSelector(
getCounterValue,
(counter, props) => counter * props.multiply);
this.store.pipe(select(fromRoot.getCount, { multiply: 2 }))

11. Testing - ProvideMockStore
describe('Mock Store', () => {
let mockStore: MockStore<{ counter1: number, counter2: number }>;
beforeEach(() => {
const initialState = { counter1: 0, counter2: 1 };
TestBed.configureTestingModule({
providers: [
provideMockStore({ initialState })
],
});
mockStore = TestBed.get(Store);
});
it('should set the new state', () => {
mockStore.setState({ counter1: 1, counter2: 2 });
mockStore.pipe(take(1)).subscribe(state => {
expect(state.counter1).toBe(1);
});
});
});

12. Testing - ProvideMockStore
describe('Mock Store', () => {
let mockStore: MockStore<{ counter1: number, counter2: number }>;
beforeEach(() => {
const initialState = { counter1: 0, counter2: 1 };
TestBed.configureTestingModule({
providers: [
provideMockStore({ initialState })
],
});
mockStore = TestBed.get(Store);
});
it('should set the new state', () => {
mockStore.setState({ counter1: 1, counter2: 2 });
mockStore.pipe(take(1)).subscribe(state => {
expect(state.counter1).toBe(1);
});
});
});

13. Effects - Life cycle
import { OnInitEffects } from '@ngrx/effects';
class UserEffects implements OnInitEffects, OnIdentifyEffects {
constructor(private effectIdentifier: string) {}
ngrxOnInitEffects(): Action {
return { type: '[UserEffects]: Init' };
}
ngrxOnIdentifyEffects() {
return this.effectIdentifier;
}
}

14. And more…
New entity adapter
New actions on the RouterStoreModule
StoreDevTools enrichment
NGRX-data

15. NGRX metaReducer

16. What are meta reducers?

17. What are meta reducers?
MetaReducers are hooks into the action->reducer
pipeline. They allow us to pre-process actions
before normal reducers are invoked.

18. What are meta reducers?
MetaReducers are hooks into the action->reducer
pipeline. They allow us to pre-process actions
before normal reducers are invoked.
Or in other words:
“MetaReducers are Redux middleware “

20. Meta Reducers

21. Meta reducers get reducer,
state and action and return new
state
MetaReducers API

22. Demo App

23. App Objectives:
Create “User Preferences” which saves all
user choices:
Every user action will be saved to both client
store and localStorage
When re-starting the application - The store
sync with the latest state from the
localStorage

24. Live coding…

25. Thank You
@EliranEliassy eliran.eliassy@gmail.comeliraneliassy