Обновить текстовое поле после изменения в хранилище NGRX - Двухстороннее связывание

Question

Я использую Angular 6 с NGRX. Я обновил значение поля в своем магазине NGRX в редукторе, и это прекрасно работает. Как создать двухстороннее связывание, чтобы поле ввода текстового поля из формы в пользовательском интерфейсе также обновлялось на основе этого свойства в хранилище. Я хочу иметь двухстороннюю привязку между моим магазином NGRX и полем ввода формы?

Answer 1

Вы можете подписаться на свойство магазина в вашем компоненте, используя @select decorator.

Что-то вроде этого:

@select([YOUR_REDUCER, 'property']) private propertyObs$: Observable<type>;

И в вашем шаблоне вы можете подписаться на propertyObs с помощью AsyncPipe.

Больше информации об AsyncPipe: https://blog.angular-university.io/angular-reactive-templates.

Селекторы NgRx: https://toddmotto.com/ngrx-store-understanding-state-selectors