Friday, October 11, 2019

Ngrx


NGRX:
Generally, it's a pattern for controlling the state of an application, and the flow of data throughout the appliction.


NgRx App State Management

Let’s look at the NgRx implementation — there are several components to understand.
  • Store: Store is what holds the app's state. 
  • Action: A unique event dispatched from components and services that describe how the state should be changed. For example, ‘Add Customer’ can be an action that will change the state (i.e. add a new customer to the list).
  • Reducer: All the state changes happen inside the reducer; it responds to the action and, based on that action, it will create a new immutable state and return it to the store.
  • Selector: Selector is a function used for obtaining a part of the state from the store.
  • Effect: A mechanism that listens for dispatched actions in an observable stream, processes the server response, and returns new actions either immediately or asynchronously to the reducer to change the state. Please note that we are not using effect in this example app.

Ref:
  1. https://blog.angularindepth.com/how-to-start-flying-with-angular-and-ngrx-b18e84d444aa
  2.  https://dzone.com/articles/angular-app-state-management-with-ngrx (VVI basic example)
  3. https://stackoverflow.com/questions/57563867/ngrx-pass-payload-through-dispatch-method-to-update-store 
  4. https://medium.com/@RupaniChirag/simple-angular-app-using-ngrx-8-store-and-effects-factory-methods-f3423b9f6d3b (effect very simpel and easy)

No comments:

Post a Comment