The shortest path to NgRx

@jdjuan

@jdjuan

@jdjuan

@jdjuan

@jdjuan + @caroso1222

ngcolombia.com

@jdjuan

Ask me how to become a:

⭐️ Google Developer Expert ⭐️

@jdjuan

@jdjuan

@jdjuan

slides.com/
jdjuan

@jdjuan

@jdjuan

PROBLEM

@jdjuan

NgRx takes time

@jdjuan

@jdjuan

SOLUTION

@jdjuan

ngrx-data

ngrx-schematics

by John Papa

from Reactive Extensions

ngrx-snippets

from Hardik Pithva

Library

Module

Extension

@jdjuan

Managing State

@jdjuan

What is State?

@jdjuan

"State is a representation of our application at a given moment"

@jdjuan

@jdjuan

@jdjuan

@jdjuan

@jdjuan

BENEFITS

@jdjuan

Debug like the SWAT

@jdjuan

1. You get the logs

@jdjuan

2. Reproduce

@jdjuan

3. Find the trigger

@jdjuan

Bug Found!

@jdjuan

TRADEOFFS

@MikeRyanDev

S.H.A.R.I

Shared

Hydrated

Available

@jdjuan

ALTERNATIVES

@jdjuan

BehaviorSubject

@jdjuan

AKITA

@jdjuan

AKITA

@jdjuan

MobX

@jdjuan

MobX

@jdjuan

Relay

@jdjuan

Relay

@jdjuan

CerebralJS

@jdjuan

CerebralJS

@jdjuan

Meiosis

@jdjuan

Transmission

@jdjuan

Flux

@jdjuan

Alt

@jdjuan

Reflux

@jdjuan

NGXS

@jdjuan

NGRX

@jdjuan

HOW TO START

@jdjuan

Legacy
or
New?

@jdjuan

@jdjuan

ngrx-schematics

from Reactive Extensions

@jdjuan

THE STEPS!

@jdjuan

1. The Store

ng generate @ngrx/schematics:store State --statePath store --root --module app.module.ts

@jdjuan

1. The Store

@jdjuan

1. The Store

@jdjuan

2. The Entities

ng generate @ngrx/schematics:entity user/User --reducers ../store/index.ts

@jdjuan

2. The Entities

@jdjuan

2. The Entities

@jdjuan

3. The Features

ng generate @ngrx/schematics:feature authentication/Authentication --reducers ../store/index.ts --group

@jdjuan

3. The Features

ngrx-snippets

from Hardik Pithva

Extension

ngrx-data

by John Papa

Library