Redux - NgRx v8

NgRx Reactive State Angular

@malvarezcr WHO AM I? ‍

@malvarezcr WHO AM I? Web Practice Lead Co-Organizador de Angular
Costa Rica Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez @malvarezcr

@malvarezcr BEFORE WE START https://stackblitz.com/edit/angular-ngrx-intro

@malvarezcr REDUX

@malvarezcr WHAT IS REDUX? “Redux is a predictable state container
for Javascript apps.”

@malvarezcr WHY REDUX?

@malvarezcr WHAT IS NGRX? “NgRx is a set of RxJS-powered
state management libraries for Angular, inspired by Redux, a popular and predictable state management container for Javascript apps.”

@malvarezcr WHAT IS NGRX? + =

@malvarezcr PACKAGES • Store - RxJS powered state management for
Angular apps, inspired by Redux. • Store Devtools - Instrumentation for @ngrx/store enabling time-travel debugging. • Effects - Side effect model for @ngrx/store. • Router Store - Bindings to connect the Angular Router to @ngrx/store. • Entity - Entity State adapter for managing record collections.

@malvarezcr TERMINOLOGY

@malvarezcr TERMINOLOGY An action is a plain Javascript object that
describes what happened Actions

@malvarezcr TERMINOLOGY ‍♂‍♂, ‍♀ ‍♀, Actions

@malvarezcr TERMINOLOGY ‍♂‍♂, ‍♀ ‍♀, Actions v8

@malvarezcr TERMINOLOGY Dispatch It is the method used to dispatch
actions and trigger state changes to the store

@malvarezcr TERMINOLOGY Reducers specify how the application's state changes in
response to actions sent to the store Reducers

@malvarezcr TERMINOLOGY Previous state , New State Reducers

@malvarezcr TERMINOLOGY Reducer

@malvarezcr TERMINOLOGY Reducer v8

@malvarezcr TERMINOLOGY Pure Functions • No side effects • Always
return the same value e.g 2 + 2 = 4

@malvarezcr TERMINOLOGY Pure Functions Impure Functions

@malvarezcr TERMINOLOGY A object that holds the application state (Single
source of truth) Store

@malvarezcr TERMINOLOGY It’s an object whose state cannot be modiﬁed
after it is created Immutability

@malvarezcr TERMINOLOGY Good Bad

@malvarezcr

@malvarezcr WHERE DOES REDUX COME FROM?

@malvarezcr FLUX

@malvarezcr REDUX

@malvarezcr FLUX VS REDUX Flux Redux Multiple Stores Singleton Dispatcher
‍♂ Mutable State Single Store ❌ No dispatcher ‍ Immutable State

@malvarezcr PRINCIPLES ⚡ Single Source of Truth State is Read
Only Store is updated by pure functions (reducers)

@malvarezcr SHOULD I LEARN/USE REDUX? • Learn • Should I
use it? 1. Size? 2. Simple? = ❌

@malvarezcr PROS VS CONS Pros Cons Easier to debug Separation
of manipulation of data form the view Maintainability / Scalability Learning curve ❌ More code to write

@malvarezcr DEMO

@malvarezcr CONCLUSION

@malvarezcr Links • Example Stackbliz https://stackblitz.com/edit/angular-ngrx-intro • NgRx Documentation https://ngrx.io/docs
• Twitter: @malvarezcr / Medium: @mahcr Mariano Álvarez

@malvarezcr @angularcostarica @angularcr

Redux - NgRx v8

Redux - NgRx v8

More Decks by Mariano Alvarez

Other Decks in Programming

Featured

Transcript