Как использовать несколько переменных в сторе?

Question

[zlodiak]

Я попытался сделать страничку, на которой было бы два счётчика, которые управляются через ngrx. Каждый счётчик имеет свою отдельную переменную в сторе.

LIVE DEMO

Мне кажется, моё решение избыточно. Скажите пожалуйста, существует ли способ реализовать тот же функционал проще и короче, используя ngrx?

Ну а если покажете это на примере кода, то буду дико благодарен

Answer 1

[0xD34F]

В качестве стейта будет объект, содержащий в себе значения всех счётчиков:

const initialState = {
  first: 0,
  second: 0,
};

Экшена достаточно и одного, помимо типа будет указываться имя счётчика:

class CounterAction implements Action {
  constructor(public type: ActionTypes, public payload: string) {}
}

Соответственно, в редьюсер передаём CounterAction, и обновляем указанный счётчик:

function counterReducer(state = initialState, action: CounterAction) {
  switch (action.type) {
    case ActionTypes.Increment:
      return {
        ...state,
        [action.payload]: state[action.payload] + 1,
      };
  ...

Далее, в компоненте покажем счётчики:

<div *ngFor="let item of count$ | async | keyvalue">
  <button (click)="increment(item.key)">Increment</button>
  <div>Current Count: {{ item.value }}</div>
  <button (click)="decrement(item.key)">Decrement</button>
  <button (click)="reset(item.key)">Reset Counter</button>
</div>

Ну и попросим их обновиться:

increment(key) {
  this.store.dispatch(new CounterAction(ActionTypes.Increment, key));
}
...

https://stackblitz.com/edit/angular-ms9wfw?file=sr...