Конфигурация редуктора магазина ngrx (угловая 5) - PullRequest
Новая
       13

Конфигурация редуктора магазина ngrx (угловая 5)

0 голосов
/ 16 сентября 2018

Я использую ngrx / store в своем проекте Angular 5.Состояние приложения, которое я храню, имеет несколько свойств (срезов).Я хочу, чтобы индивидуально можно было слушать изменения любого из этих свойств.Так что в этом случае я должен использовать несколько редукторов - по одному для каждого среза состояния?Можно ли это сделать одним редуктором?Я предполагаю, что это невозможно сделать, потому что с одним редуктором мы вернем новую копию всего состояния, а не срез.Например, 

class AppState{
    private customerList: Customer [];
    private selectedCustomer: Customer;
    private countriesOperational: Country [];
}

Я хочу иметь возможность прослушивать изменения только на selectedCustomer, поэтому я могу сделать это: 

store.select(state => state.selectedCustomer).subscribe((data) => {
})

1 Ответ

0 голосов
/ 16 сентября 2018

Прежде всего - не нужно иметь несколько редукторов.Новый редуктор должен быть реализован, как только вы почувствуете, что ваш текущий редуктор слишком велик / имеет несколько вариантов ответственности / должен быть разделен из-за некоторых ограничений.

Возвращаясь к вашей проблеме - допустим, у вашего клиента есть «id»имущество.И в сценарии, который я хочу представить, приложение будет показывать список текущих идентификаторов - из customerList.CustomerList будет динамически обновляться с использованием действий ngrx (и шаблон будет прослушивать изменения).

В компоненте: 

public customerIds$: Observable<string[]>;

public ngOnInit(): void {
   this customerIds$ = this.store.select(
      state => state.customersList.map(customer => customer.id);
   );
}

В вашем шаблоне: 

<div *ngFor="let id of customerIds$ | async">
   {{id}}
</div>

Прямо сейчас (с использованием асинхронного канала) вы связали свой HTML-шаблон с компонентом ts.Итак, допустим, у вас есть кнопка, которая добавляет нового клиента в CustomersList: 

<button (click)="addNewCustomer()">Add new customer</button>

А метод addNewCustomer() отправляет действие, которое обрабатывается вашим магазином.Результатом действия является hiddin в редукторе, например: 

... (reducer logic)
   case ADD_NEW_CUSTOMER:
      return {
        ...state,
        customersList: [...state.customersLits, action.payload]

Где:

  • action.payload - это новый клиент, которого вы хотите добавить

  • [... state.customersList ......] синтаксис - массив необходимо обновить с использованием неизменяемого подхода - больше можно найти здесь: https://vincent.billey.me/pure-javascript-immutable-array/

После нажатия кнопки в шаблоне отображается новый идентификатор клиента

...