This document discusses new features in NGRX version 7, including breaking changes to ofType and selectors, new testing utilities like ProvideMockStore, and the introduction of meta reducers. Meta reducers allow preprocessing actions before normal reducers and act as middleware between actions and reducers. The document demonstrates building a meta reducer that syncs the store state with localStorage so the store rehydrates on app restart with the latest data from localStorage.

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