How to set reducer for @ngrx/store in angular 6 that set {[key:string]:AnyComponent}

Question

app.action.ts

export enum BarActionTypes {
  Register= '[bar] Register'
}

export class Register implements Action {
    readonly type =  BarActionTypes.Register;
    constructor(public key: string, public anyComponent: BarComponent) {}
}


export type appActions = Register;

app.reduser.ts

export interface BarState {
  _registry: {[key: string]: BarComponent};
}

const InitBarState: BarState = {
  _registry: {}
};


export function Reducer(state= InitBarState, action: appActions): BarState {
  switch (action.type) {
    case BarActionTypes.Register:

      return {
        ...state,
        _registry: _registry[action.key]=action.anyComponent
      };

    default:
      return state;
  }
}

in Component this.store.dispatch(new appActions.Register(this.name, this)); I want to set state _register[this.name] anyone can help? thanks

Well, please don't do that. Store is supposed to have immutable data only and storing a component in the store is definitely weird. You'll probably end up with either memory leak or a state that gets undefined when the component is destroyed. — maxime1992

timdeschryver timdeschryver · Accepted Answer · 2018-09-14T11:07:47

return {
  ...state,
  _registry: {
     ...state._registry,
     [action.key]: action.anyComponent
  }
};

Also if BarComponent is an Angular component, I wouldn't recommend storing it in the store.

How to set reducer for @ngrx/store in angular 6 that set {[key:string]:AnyComponent}

app.action.ts

app.reduser.ts

1 Answers