Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Today's Schedule 1. Why Redux? 2. NGRX

Slide 3

Slide 3 text

Things we have to manage in out apps • Data that comes from the server and whether it's pending or resulted in an error • UI state like toggles, alerts and errors messages • User input, filters and search queries • Other

Slide 4

Slide 4 text

Component - Service

Slide 5

Slide 5 text

But our apps grow

Slide 6

Slide 6 text

Components - Service

Slide 7

Slide 7 text

What changed?

Slide 8

Slide 8 text

Flux • Flux is an architecture for creating data layers in JavaScript applications. • It places a focus on creating explicit and understandable update paths for your application's data • Helps tracing changes during development and makes bugs easier to track down and fix

Slide 9

Slide 9 text

Flux

Slide 10

Slide 10 text

Redux • Predictable state management • Architecture that keeps the core principles of Flux by having unidirectional data flow • Redux applications have only one global, read-only application state • This state is calculated by "reducing" over a collection or stream of actions that update it in controlled ways

Slide 11

Slide 11 text

Redux Constraints • Single State Tree • Actions describe updates • Reducer apply updates

Slide 12

Slide 12 text

Redux Contracts • Reducers - Specification of how the state updates • High Order Reducers - Functions that take reducer as argument, take some additional arguments and return another reducer. • Selectors - Takes the whole states and returns a derived state

Slide 13

Slide 13 text

Redux in Angular Single responsibility?

Slide 14

Slide 14 text

Redux in Angular

Slide 15

Slide 15 text

@ngrx

Slide 16

Slide 16 text

@ngrx/store • Implementation of Redux for NG • It uses RxJS Observables

Slide 17

Slide 17 text

@ngrx/effects • Side effect model for @ngrx/store

Slide 18

Slide 18 text

@ngrx/router-store • Bindings to connect angular/router to ngrx/store

Slide 19

Slide 19 text

@ngrx/store & @ngrx/effects

Slide 20

Slide 20 text

Pros and cons using ngrx 1. Unidirectional data flow 2. Really helpful dev-tools (time travel) 3. Good code separation 4. Fast bug fixing due to 1, 2 and 3 5. Easier testing and reasoning due to pure functions and composition 6. Better angular performance with OnPush Strategy 7. More files and code

Slide 21

Slide 21 text

https://github.com/ngrx/store

Slide 22

Slide 22 text

Example

Slide 23

Slide 23 text

Install packages

Slide 24

Slide 24 text

Install devtools

Slide 25

Slide 25 text

Define store actions app/store/app.actions.ts

Slide 26

Slide 26 text

Define state structure app/store/app.reducer.ts

Slide 27

Slide 27 text

Define state changes app/store/app.reducer.ts

Slide 28

Slide 28 text

Create the reducer function app/store/app.reducer.ts

Slide 29

Slide 29 text

Import store and devtools app/store/app.module.ts

Slide 30

Slide 30 text

Create the app model app/store/app.module.ts

Slide 31

Slide 31 text

Use the app model app/todo-list/todo-list.component.ts

Slide 32

Slide 32 text

Use the app model app/todo-list/todo-list.component.html

Slide 33

Slide 33 text

The reducer factory app/store/reducer-factory.ts

Slide 34

Slide 34 text

Demo

Slide 35

Slide 35 text

Resources http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ https://gist.github.com/btroncone/a6e4347326749f938510