Download as PDF, PPTX
![Immutable vs Mutable = Array Methods
[].push(…) =1
[].concat(…) =2
[].filter(…) =3
[].map(…) =5
[].forEach() =6
[…[], newItem] =7
[].shift(…) =4 [].splice(…) =8
MUTABLE
IMMUTABLE
IMMUTABLE
MUTABLE
IMMUTABLE
MUTABLE
IMMUTABLE
MUTABLE](https://image.slidesharecdn.com/getting-started-ngrx-redux-angular-gustavocosta-190212170601/75/Getting-Started-with-NgRx-Redux-Angular-19-2048.jpg)
Uploaded byGustavo Costa
Getting Started with NgRx (Redux) Angular
This document provides an introduction to NgRx, a library for managing application state in Angular applications using the Redux pattern. It discusses NgRx goals like organizing and managing state, communicating changes, and performance benefits. It also covers Redux principles like single source of truth, pure functions for state changes, and read-only state. The document demonstrates the basic NgRx pattern of actions, reducers, selectors, and effects. It provides examples of setting up NgRx in an Angular application and key NgRx concepts like actions, reducers, selectors, effects, immutable data, and smart/dumb components.
More Related Content
Similar to Getting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) Angular
- 1.
- 2. Gustavo Costa Javascript, Angular,AngularJS, RxJS, Reactive Programming, Performance, GDG Organizer twitter.com/GustavoCostaW Translucent - CA linkedin.com/in/GustavoCostaW
- 3. State State View State Entity Data UserInformation
- 4.
- 5. Redux goals Organizing state1 Managingstate2 Communicate changes3
- 6. Why Redux? Communicate changes1 CacheStrategy2 Pure components3 Debugging4 Performance, OnPush5 Component communication6
- 7. Maybe you donot need it Your application is simple1 Your team is new to Angular2 Your team has a good state management pattern3
- 8. Redux Principles Redux Single source oftruth Changes ONLY by pure functions (reducers) State is read ONLY and changed ONLY by actions
- 9. Component Action Reducer Selector Store (State) View ReduxPattern ADD_PRODUCT (click)=“addProduct(product)” Get the current State Set new State Component notified Updates the view
- 10.
- 11.
- 12.
- 13.
- 14. Let’s start -https://ngrx.io npm install @ngrx/store --save1 StoreModule.forRoot(reducer);2 StoreModule.forFeature(‘featureName’, reducer);3
- 15.
- 16. StoreModule.forFeature(reducer); forRoot(reducer) forFeature(‘products’, reducer) forFeature(‘cart’, reducer) forFeature(‘orders’,reducer) forFeature(‘customers’, reducer)
- 17.
- 18.
- 19. Immutable vs Mutable= Array Methods [].push(…) =1 [].concat(…) =2 [].filter(…) =3 [].map(…) =5 [].forEach() =6 […[], newItem] =7 [].shift(…) =4 [].splice(…) =8 MUTABLE IMMUTABLE IMMUTABLE MUTABLE IMMUTABLE MUTABLE IMMUTABLE MUTABLE
- 20. Smart and DumbComp
- 21.
- 22. Component Action Reducer Selector Store (State) View ReduxPattern + Effects listening… ADD_PRODUCT (click)=“addProduct(product)” Get the current State Calls GET Component notified Updates the view @Effects Service (Ajax) ADD_PRODUCT Set new State Returns from Server ADD_PRODUCT_SUCCESS
- 23.
- 24. Flattening Strategies switchMap - 1Cancels the current subscription/request and can cause race condition * Use for get requests or cancelable requests like searches concatMap - 2 Runs subscriptions/requests in order and is less performant * Use for get, post and put requests when order is important mergeMap - 3 Runs subscriptions/requests in parallel * Use for put, post and delete methods when order is not important exhaustMap - 4 Ignores all subsequent subscriptions/requests until it completes * Use for login when you do not want more requests until the initial one is complete
- 25. @Effects npm install @ngrx/effects--save1 EffectsModule.forRoot(reducer);2 EffectsModule.forFeature(‘featureName’, reducer);3
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. Selectors Provide a stronglytyped API1 Reusable2 Memoized (cached)3 Encapsulate complex data transformations4
- 34.
- 35.
- 36.
- 37.