Busy devs intro to NGRX

Busy ⏰ Devs intro to NGRX ✈ Houssam Yahiaoui @_hcodex

Not my best Picture But I love : I secretly
play Apex legend Dirty pleasure : I’m kinda good at it

Talk Promises : Tons of gifs More code Less slides
s"ll I might break this one sorry PDF readers as I should Busy ⏰ Devs intro to NGRX ✈

Agenda : What is the tradi+onal data ﬂow ? Why
it sucks ? What’s Redux ? NGRX ? NGRX Components. Busy ⏰ Devs intro to NGRX ✈

Busy ⏰ Devs intro to NGRX ✈ What is the
tradi+onal data ﬂow ? Why it sucks ?

<UI Component> <Service A> <Service A> <Service A> RXJS Observable
RXJS Observable RXJS Observable

CACHING

Think of extra cost $$ over Refresh

Components rela=onship issues

Great tooling

REDUX Pattern Busy ⏰ Devs intro to NGRX ✈

Single source of TRUTH State is read ONLY Changes are
made in ure functions

Actions Side effects Reducers

To know more about Redux Check out my 1h long
conversa<on with the one and only Mr. Riad Benguella h"ps://www.youtube.com/watch?v=45HoMRwbbbU Link : It’s as old as 2017, and Yes I was that yong :/

Busy ⏰ Devs intro to NGRX ✈ Busy ⏰ Devs
intro to NGRX ✈ Pure Functions 101 …… A deterministic model will thus always produce the same output from a given starting condition or initial state. Wikipedia

In plain English : 1 - It depends only on
its own arguments. 2 - It won’t try to change variables out of its scope. 3 - It doesn't produce any side eﬀects.

Spot the Pure functions

Busy ⏰ Devs intro to NGRX ✈ <html> <body> <script>
let val1 = 5; let val2 = 4; function pure() { return val1 * val2; } document.write(pure()); </script> </body> </html> 20 Is it Pure ??

function pure(arg) { let val = 4; return val * arg; } document.write(pure(2)); </script> </body> </html> 8 Is it Pure ??

function pure(arg) { return 5 * arg; } document.write(pure(2)); </script> </body> </html> 10 Is it Pure ??

Busy ⏰ Devs intro to NGRX ✈ What is NGRX
?

Busy ⏰ Devs intro to NGRX ✈ Actions Selectors Reducers
Effects Effects Effects

Busy ⏰ Devs intro to NGRX ✈ Actions : Actions
are one of the main building blocks in NgRx. Actions express unique events that happen throughout your application. From user interaction with the page, external interaction through network requests, and direct interaction with device APIs, these and more events are described with actions. - Ngrx team First thing to think about while architecting your app, you can consider them As Soccer team movements while trying to score and win against the ENEMY! - Radical Houssam who didn’t play any soccer game since 2013

Busy ⏰ Devs intro to NGRX ✈ import { createAction,
props } from '@ngrx/store'; export const initiateGetProfileRequest = createAction('[Customers] Profile - Initiate Request'); export const finalizeGetProfileRequest = createAction( '[Customers] Profile - Finalize Request’, props<{ profileInformation: FullProfile }>() ); Action With/Without Params

Busy ⏰ Devs intro to NGRX ✈ Selector : Selectors
are pure functions used for obtaining slices of store state. - Ngrx team While trying to win againts the ENEMY, you will definitely need to select each person in the team, very carefully to pick only players you really NEED, that’s why we’ve National Team selector ;) - Radical Houssam who didn’t play any soccer game since 2013

Busy ⏰ Devs intro to NGRX ✈ import { createSelector
} from '@ngrx/store'; export const getProfileConact = createSelector( geFullOrFeatureState, state => state.fullProfile.contact ); Selectors export const getProfilePicture = createSelector( geFullOrFeatureState, state => state.fullProfile.photo );

Busy ⏰ Devs intro to NGRX ✈ Reducers : Reducers
in NgRx are responsible for handling transitions from one state to the next state in your application - Ngrx team It’s the locker room, where the magic happens and team keep receiving new instructions based on the events that happened in the match. - Radical Houssam who didn’t play any soccer game since 2013

Busy ⏰ Devs intro to NGRX ✈ import { createReducer,
on } from '@ngrx/store'; export const profileReducer = createReducer<ProfileState>( initialProfileState, on(ProfileActions.initiateGetProfileRequest, (state): ProfileState => { return { …state, isPageLoading: true } } ); Reducers import * as ProfileActions from ‘./profile.actions'; import { ProfileState, initialProfileState } from ‘./profile.state';

Let’s talk about Side Effects Busy ⏰ Devs intro to
NGRX ✈ Side dish that you can’t get enough of

Houssam Yahiaoui @_hcodex Busy ⏰ Devs intro to NGRX ✈
Thank you !

Busy devs intro to NGRX

Busy devs intro to NGRX

Houssem Yahiaoui

More Decks by Houssem Yahiaoui

Other Decks in Technology

Featured

Transcript