Reducer

Reducer class supplies a key with some initial value to state object.

implementation as follows.

app.compoenent.reducer.ts

import { Reducer,
  IReducer,
  Action,
  IUpdateState,
  IState } from 'angular-store';

const username: IReducer<string> = {
  key: 'username',
  initialState: ''
};

@Reducer<string>(username)
export class UsernameReducer {
  constructor() {}
  
  @Action(UPDATE_USERNAME)
  public updateUsername(payload: string, { getState, updateState }: IState) {
    const state = getState<AppState>();
    updateState({ key: username.key, payload });
  }
  
   // multi action
  @Action([UPDATE_USERNAME, ADD_USER ])
  public onMultiUpdate(payload: string, state: IState) {
    console.log('both changes!!', payload);
  }
}

Once you serve your angular application, that would result in state as follows.

{
    username: '@angular/store'
}