Angular ngrx

Introduction

ngRx is a version of redux built for Angular. It provides,

• Centralize immutable state
• Performance
• Testability due to use of pure functions
• Tooling, advance logging, visualize state tree

Redux Pattern

It provides a “unidirectional data flow” that helps to manage and organise data better and makes debugging a lot easier.

• the UI dispatches an action to the reducer
• the reducer sends the new state to the store
• the store, sets the state in the reducer, and notifies the selector
• the selector sends out new state event to all subscribed observers

• Store, single source truth for state,
  • Don not sotr unshared status, angular state
  • Non serailizable state
• Actions, Dispatch action to change state
• Reducers, used to change state state, examples
  • set user details property on login,
  • toggle table a side menu visible
  • set global spinner visible property

When to Use ngRx

• provides a place for UI state to retain ti between router views
• provides client-side cache to use as needed
• reducer updates the store and the store notifies all subscribers
• it has great tooling

Sample Application Architecture

Captured this be is kinda gives an approach for small apps and where to start. Somethings it is the size of the task which can distract people from starting it.

Walkthrough a Change

Introduction

Redux follows a pattern regardless of the problem you are trying to solve. This may look like the React Redux Page after I have finished.

Process

We are going to update the display product code state.

• User issues a click
• The component dispatches an action to the reducer
• The reducer uses the action as input and the current state from the store to create new state
• The reducer sends the state to the store
• The store broadcasts the state to all subscribers, in this case the component
• Component updates it's bound property

Installing Packages

Initializing the Store

Installing

Using the angular cli app.modules.ts is updated along with packages.json

ng add @ngrx/store

This makes the following changes

import { StoreModule } from '@ngrx/store';
...
@NgModule({
  imports: [
    BrowserModule,
...
    StoreModule.forRoot({}, {})
  ],

Module Considerations

For modules, like the router module, there is a forFeature equivalent of the StoreModule. We can, just like react have multiple reducers for a feature too. Each reducer is stored using tag/value.

    StoreModule.forFeature('products', {
       productList: listReducer,
       productData: dataReducer
    })