Angular : Adding store + reducer


Added reducer or store pretty much the same thing, to me. To setup the required libraries,

npm install @ngrx/store --save

First you need some sort of actions


import { Action } from '@ngrx/store';

export enum ActionTypes {

Login = 'Login',

Logout = 'Logout',

Reset = 'Reset',
}

export class Login implements Action {
readonly type = ActionTypes.Login;
}

export class Logout implements Action {
readonly type = ActionTypes.Logout;
}

export class Reset implements Action {
readonly type = ActionTypes.Reset;
}

export type ActionsUnion = Login | Logout | Reset;


Then you setup your reducer :-

import {
ActionReducer,
ActionReducerMap,
createFeatureSelector,
createSelector,
MetaReducer
} from '@ngrx/store';
import { environment } from '../../environments/environment';
import { ActionsUnion, ActionTypes, Login } from '../actions/Login';
import { Action } from '@ngrx/store';

export interface State {
type : string,
actionValue : number;
}

export const initialState: State = {
type: "empty",
actionValue : 0,
};

export function LoginReducer(state = initialState, action: Login): State {
console.log("store reducer happening...")
switch (action.type) {
case ActionTypes.Login:
console.log("login reducer");
return {
...state,
type : state.type,
actionValue : state.actionValue,
};
defaut:
return initialState;
}
}


In the app.module.ts, we setup our store and tied to our reducer. Please note that we specify {
    login : LoginReducer,
}

import { StoreModule } from '@ngrx/store';

@NgModule({
declarations: [
AppComponent,
CarInsuranceComponent,
HouseInsuranceComponent,
HealthInsuranceComponent,
],
imports: [
BrowserModule,FormsModule,AppRoutingModule,
StoreModule.forRoot({login : LoginReducer}),
EffectsModule.forRoot([AppEffects])
],
providers: [],
bootstrap: [AppComponent]
})
















Comments

Popular posts from this blog

The specified initialization vector (IV) does not match the block size for this algorithm