Angular recipe: Get State updates from Redux

This article is about the possible ways to retrieve your data State in Angular (read 2 or 4) from Redux Store.

It's assumed that you are already familiar with Redux ecosystem. If not click an image below:

---- ### Angular-redux/store We have installed <a href="https://github.com/angular-redux/store">@angular-redux/store</a> which integrates our redux store in Ng2 applications. ```bash npm install redux @angular-redux/store --save ``` <br/> #### Store: Here we create the simple possible store with typed state and one field `marker`, that will be updated with each action. ```typescript import { combineReducers } from 'redux'; import {ItemsState, itemsReducer} from './items/items.reducer'; /** * Our Application state * * @interface IAppState */ export interface IAppState { readonly marker?: String } /** * Root reducer of our app */ export const rootReducer = combineReducers<IAppState>({ marker: marker }); /** * Our inlined sub-reducer for updating the marker. */ function marker(state:String = "InitialEmptyState", action: any): String { return "MarkedByAction " + action.type; } ``` <br/> #### Component: Our Component in which we will display our marker field changes. ```typescript import { Component } from '@angular/core'; import {NgRedux, select} from '@angular-redux/store'; import {Observable} from 'rxjs'; import {IAppState} from '../store/store'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private ngRedux: NgRedux<IAppState>, private actions: AppActions) { } ngOnInit() { } public clickHandler(): void { this.ngRedux.dispatch(this.actions.create()); } } ``` So, whenever the `clickHandler` is invoked we dispatch some action which updates our `marker` state. ---- ### Get updates from Store To update the UI we need to `subscribe` on our state updates and here are the various ways to do so. _\*Note: To focus on the receiving state updates, we will just output values into the log. Also for an explicit difference between variables, all variable names are different. Otherwise I would stick to just `marker$` for streams._ <br/> #### Subscribe for all State changes This is the most primitive way. We subscribe for the all changes and retrieve needed field from the whole State: ```typescript constructor(private ngRedux: NgRedux<IAppState>, private actions: ItemsActions) { ngRedux.subscribe(() => { console.log("State Changed! m: " + this.ngRedux.getState().marker); }); } ``` <br/> #### Select property from NgRedux store as an Observable Below is three different ways which do exact the same thing. * **Select with Fat Arrow** ```typescript ngOnInit() { const stream1$ = this.ngRedux.select(state => state.marker); stream1$.subscribe(m => { console.log("#1 Marker updated! m: " + m); }); } ``` * **Select with Selector.** Separating your selector migh become handy if you have a deep structure and need to be able to reuse selector in different places. _\* marker.selector.ts_ ```typescript import {IAppState} from '../store'; /** * Selector for 'marker' in application store */ export const markerSelector = (state: IAppState) => state.marker; ``` _\* app.component.ts_ ```typescript import {markerSelector} from '../store/marker.selector'; ... ngOnInit() { const stream2$ = this.ngRedux.select(markerSelector); stream2$.subscribe(m => { console.log("#2 Marker updated! m: " + m); }); } ``` * **Select by property Name**. ```typescript ngOnInit() { const stream3$ = this.ngRedux.select('marker'); stream3$.subscribe(m => { console.log("#3 Marker updated! m: " + m); }); } ``` If you have a deeper structure pass it as an array ```typescript const bar$ = this.ngRedux.select(['foo', 'bar']); ``` * **Select via `@select` annotation**. ```typescript @select(['marker']) readonly stream4$: Observable<string>; ... ngOnInit() { this.stream4$.subscribe(m => { console.log("#4 Marker updated! m: " + m); }); } ``` ---- ### Display Updates in UI Here are also few ways to display your updates in UI: * **Update property in subscribe handler** _\* app.component.html_ ``` <h2>Marker: {{marker}}</h2> ``` _\* app.component.ts_ ```typescript public marker: string; ... ngOnInit() { const marker$ = this.ngRedux.select<string>('marker'); marker$.subscribe(newMarker => this.marker = newMarker); } ``` * **Use `| async` pipe in template.** It will automatically subscribe to your `Observale` stream and retrieve the values. _\* app.component.html_ ``` <h2>Marker: {{marker$ | async}}</h2> ``` _\* app.component.ts_ ```typescript @select(['marker']) readonly marker$: Observable<string>; ``` ---- ### Conclusions * Use the `@selector` annotation with `readonly` access modifier * Bind UI directly with Observable property through `| async` pipe * Use Types everywhere. ---- ## see Also * [Keynote: Quick Creation of Angular2 App](https://bloomlab.blogspot.com.ee/2017/03/keynote-quick-creation-of-angular2-app.html) * [Keynote: Quick Creation of Node.js Module](http://bloomlab.blogspot.com.ee/2017/03/keynote-quick-creation-of-nodejs-module.html) * [Redux - Ecosystem](http://redux.js.org/docs/introduction/Ecosystem.html) * [@angular-redux/store](https://github.com/angular-redux/store) * [Github - Angular CLI](https://github.com/angular/angular-cli)