NgRx Ducks - Dynamic types facades

This slide deck demonstrates how NgRx Ducks helps you to write domain driven style redux applications with NgRx.

You will learn about the API of NgRx Ducks and how it seamlessly integrates with vanilla NgRx.

https://twitter.com/gregonnet

https://github.com/co-IT/ngrx-ducks

Transcript

1. NgRx Ducks
2. Agenda • The story behind NgRx Ducks? • Introducing the API • LIVE Coding • Advanced features of NgRx Ducks • LIVE Coding
3. Story
4. Actions Effects Selectors Reducer We will talk about the maintenance effort for NgRx’s building blocks.
5. “I added new actions needed for our brand new feature...”
6. “Ooh, sorry but these actions already have been implemented. The types are...”
7. “I added new actions needed for our brand new feature...” Selectors
8. “I added new actions needed for our brand new feature...” Selectors Effects
9. It is getting harder and harder to keep track of the decentralized infrastructure of a Redux application.
10. Why is it getting harder? ?
11. Store consists of many features Languages Customers User
12. Login journey User User menu Features consist of many slices Registration journey User details
13. Each slice is represented by... Login journey Authentication User menu Registration journey User details Actions Selectors Effects Reducer
14. The complexity of our codebase increases rapidly. !
15. “Can you remember all features we have already added to the store?”
16. “Hmm, nope...”
17. Actions Effects Selectors Reducer What if we can bundle NgRx’s building blocks dynamically having one easy to use API?
18. API
19. export const increaseBy = createAction( 'Increase by', props<{ payload: number }>() ); Action Creator The birth of a duck @Action('Increase by') increaseBy( state: number, payload: number ): number { return state + payload; } Duck Action Type Action Payload
20. export const reducer = createReducer<number>( 0, on(increaseBy, (state, { payload }) => state + payload) ); Case-Reducer The birth of a duck @Action('Increase by') increaseBy( state: number, payload: number ): number { return state + payload; } Duck
21. A Duck ties together the action with the corresponding case-reducer.
22. export class Counter { @Action('Increase by') increaseBy(state: number, payload: number): number { /* ... */ } @Action('Decrease by') decreaseBy(state: number, payload: number): number { /* ... */ } @Action('Set') set(state: number, payload: number): number { /* ... */ } } Creating a duck family
23. Actions + Case-Reducers Reducer
24. import { reducerFrom } from '@co-it/ngrx-ducks'; export class Counter { /* @Action declarations */ } export const counterReducer = reducerFrom(Counter); Automatic reducer generation
25. A Duck allows you to focus on mutation logic and omits maintenance effort of reducer functions.
26. Automatic service generation import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter { @Action('Increase by') increaseBy(state: number, payload: number): number { /* ... */ } . . . }
27. @Ducksify behind the scenes Counter @Duckisfy • produces a facade • connects facade to Store • registers facade as service @Component • @Inject facade Duck<Counter> Duck<Counter> code transformation
28. Usage of a Duck-Service export class CounterComponent implements OnInit { constructor(@Inject(Counter) private counter: Duck<Counter>) { } }
29. Dispatch an action export class CounterComponent implements OnInit { constructor(@Inject(Counter) private counter: Duck<Counter>) { } ngOnInit(): void { this.counter.incrementBy(42); } } // this.store.dispatch(incrementBy({ payload: 42})) NgRx Classic or
30. A Duck allows to dispatch an action using a simple function taking an optional payload. ( )
31. Here we go!
32. LIVE CODING
33. Reuse existing selectors import { bindSelectorGroup } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter { select = bindSelectorGroup(selectors); . . . }
34. Consume selector as Observable export class CounterComponent implements OnInit { count$: Observable<number>; constructor(@Inject(Counter) private counter: Duck<Counter>) { this.count$ = this.counter.select.currentCount; } }
35. A Duck turns a memoized selector into an Observable.
36. The Duck from a component’s perspective
37. LIVE CODING
38. Use initiating actions import { effect } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter { set = effect<number>('Set'); . . . }
39. Dispatch initiating actions export class CounterComponent implements OnInit { constructor(@Inject(Counter) private counter: Duck<Counter>) { } ngOnInit(): void { this.counter.set.dispatch(42); } }
40. A Duck used in an effect @Injectable() export class CounterEffects { setCounter = createEffect(() => this.actions$.pipe( whereType(this.counter.set), delay(2000), map(action => this.counter.setSuccess.action(action.payload)) ) ); constructor( private actions$: Actions, @Inject(Counter) private counter: Duck<Counter> ) {} } Calling the action creator
41. LIVE CODING
42. Give NgRx Ducks a try install @co-it/ngrx-ducks
43. Summary • A Duck ... ◦ is a dynamic facade that can be injected in a Component ◦ composes read- and write-API and provide a dynamically typed facade. ◦ automatically generates action creators & reducer functions. • NgRx Ducks ships with Schematics ◦ Try @co-it/ngrx-ducks:duck <path>/<name>
44. Special thanks to Sascha Nuissl Marcel Hoyer Wes Grimes ...introducing me to the Ducks-Pattern ...creating the logo for NgRx Ducks ...helping me with the slides @pixelstatic @saschanuissl @wesgrimes Thomas Skalnik ...creating the schematics for NgRx Ducks @skydever
45. Thanks you for watching! @GregOnNet medium.com/@gregor.woiwode co-IT.eu GmbH - Inspire to change Gregor Woiwode Creator of NgRx Ducks https://github.com/co-it/ngrx-ducks
46. Images by - Free-Photos from Pixabay - Alain Audet from Pixabay Icon s from Flaticon by - Freepik - Good Ware - Smashicons Credits