Как я могу иметь несколько состояний в моем Магазине, которые используют одну и ту же логику редуктора?

Question

На основе ngrx/store Пример ( https://github.com/ngrx/platform/blob/master/docs/store/README.md) Я хотел бы иметь 2 независимых состояния счетчика в моем Магазине с ключами count1 а также count2, Они определены в следующем коде:

// counter.ts
import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';

export function counterReducer(state: number = 0, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    default:
      return state;
  }
}

// app-module.ts
import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count1: counterReducer, count2: counterReducer })
  ]
})
export class AppModule {}

Что мне нужно изменить, чтобы иметь возможность отправлять 2 разных действия приращения (например, store.dispatch({ type: INCREMENT })) в магазин, который обновляет либо count1 или же count2 но не они оба? Я что-то здесь упускаю или такое поведение невозможно?

Answer 1

Вы должны иметь два отдельных действия для счетчика 1 и счетчика 2

пример

export const INCREMENT_COUNTER_1 = 'INCREMENT_COUNTER_1';
export const INCREMENT_COUNTER_2 = 'INCREMENT_COUNTER_2';

То же самое касается декремента. Вам нужно иметь два отдельных действия декремента для каждого счетчика.

И если вы хотите объединить действия, скажем, например, вы хотите увеличить счетчик 1 и через 5 секунд вы хотите увеличить счетчик 2, вы можете сделать это в своем эффекторе. В вашем эффекторе у вас будет два эффекта, один для увеличения счетчика 1 и с наблюдаемой, которая ждет 5 секунд и позже вызывает counter2, а другой эффект, который увеличивает счетчик 2.

Вот реальный проект GitHub, который использует RxJs 6 и angular 6. Надеюсь, это поможет.

Answer 2

Ну, вам нужно передать текущее состояние функции, как обычно это делается в Redux. Так что вам нужно пройти state.count1 или же state.count2 в зависимости от вашей бизнес-логики.

Как именно это достигается в вашем приложении прямо сейчас, зависит от остальной части вашего кода, но counterReducer наверняка кажется способным взять две версии гос. Все дело в том месте, где вы управляете фактическим состоянием.

В идеальной ситуации здесь у вас будет state объект в какой-то момент, который вы запрашиваете вещи для представления вашего приложения, это где вы будете хранить 2 версии variable count названный count1 а также count2 или что угодно. Вы могли бы даже пойти, имея только 1 countobject это будет содержать 2 subvariables, но я предполагаю, что это только для тестирования.

Если вы добавите больше кода в ваш пример или настройте stackblitz.com ссылка, мы можем помочь вам немного больше.