angular 5 State management using Redux and Behavior Subject - angular5

Question

How do you do state management in angular 5 ? Between Redux and Behavior Subject which approach is better to follow and why.
Thanks.

Answer 1

Angular Service Layers: Redux, RxJs and Ngrx Store - When to Use a Store And Why?
ngrx sample example
Install the below packages:
npm install #ngrx/store --save
npm install #ngrx/effects --save
app.module.ts
import { appReducer } from './state/app.reducer';
import { StoreModule } from '#ngrx/store';
#NgModule({
declarations: [
...
],
imports: [
...
StoreModule.forRoot(appReducer)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Store } from '#ngrx/store';
import { AppState } from './state/app.state';
import { SetAppTitleAction, getAppTitle } from './state/app-title';
import { Observable } from 'rxjs';
#Component({
selector: 'app-root',
template:
`<h1>{{appTitle$ | async}}</h1>
`
})
export class AppComponent implements OnInit {
appTitle$: Observable<string>;
constructor(private store: Store<AppState>) {
this.appTitle$ = this.store.select(getAppTitle);
}
ngOnInit(): void {
this.store.dispatch(new SetAppTitleAction('Location: AppComponent'));
}
}
app-title.action.ts
import { Action } from '#ngrx/store';
export const SetAppTitle = 'Set App Title';
export class SetAppTitleAction implements Action {
readonly type = SetAppTitle;
constructor(public payload: string) {}
}
export type AppTitleActions = SetAppTitleAction;
app-title.reducer.ts
import { AppTitleActions, SetAppTitle } from './app-title.actions';
export function appTitleReducer(state: string, action: AppTitleActions) {
switch (action.type) {
case SetAppTitle:
return action.payload;
default: return state;
}
}
index.ts
export * from './app-title.actions';
import { AppState } from './app.state';
export const getState = (state: AppState) => state;
export const getAppTitle = createSelector(getState, state => state.appTitle);
app.reducer.ts
import { ActionReducerMap } from '#ngrx/store';
import { AppState } from './app.state';
import { appTitleReducer } from './app-title/app-title.reducer';
import { versionInfoReducer } from './version-info/version-info.reducer';
export const appReducer: ActionReducerMap<AppState> = {
appTitle: appTitleReducer
};
export interface AppState {
appTitle: string;
}