Доступ к другим частям состояния в редукторе в ngrx - PullRequest
Новая
       9

Доступ к другим частям состояния в редукторе в ngrx

0 голосов
/ 27 марта 2020

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

схема моего магазина: 

a: {...}
b: {...}

Мне нужен доступ из редуктора с 'a' хранилищем функций к 'b' хранилище функций, которое инициализируется в другом редукторе.

Ответы [ 2 ]

2 голосов
/ 27 марта 2020

Вы решаете это с помощью @ ngrx / Effects.

Эффект отслеживает поток действия и фильтрует действие и реагирует на него.

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

@Injectable()
export class MovieEffects {

  loadMovies$ = createEffect(() => this.actions$.pipe(
    ofType(ActionsOfA.ChangeAction),    // which changes the related part
    map(action=>ActionsOfB.RemoveOtherPart  // dispatch
    )
  );

const aReducer = createReducer(initialState,
  on((ActionsOfA.ChangeAction, {payload}), state => ({...state, a: payload}))
);

const bReducer = createReducer(initialState,
  on(ActionsOfB.RemoveOtherPart, state => ({...state, b:{} )
);

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

0 голосов
/ 27 марта 2020

Внутри функции редуктора вы не можете получить доступ к состоянию другой функции. Это нормально и хорошо. Редуктор - чистая функция.

Как отметил Официальный c:

Редукторы в NgRx отвечают за обработку переходов из одного состояния в следующее состояние в ваше приложение. Функции редуктора обрабатывают эти переходы, определяя, какие действия обрабатывать, основываясь на типе действия.

Несмотря на это, технически возможно:

  • обрабатывать действие, объявленное в функция B внутри вашего редуктора в функции A.
  • устанавливает эффект для действия, объявленного в функции B внутри вашей функции A.

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

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

В этом случае я рекомендую отправлять новое действие для обновления состояния функции B, когда происходит действие из функции A, через эффект.

Давайте рассмотрим пример:

Feature User

  • Отправлено действие UserActions.Load.
  • В User редукторе userState.loading, установленном на true
  • Эффект в UserEffects, обработайте UserActions.Load и отправьте новое действие UIActions.ShowNotification.

Функциональный интерфейс

  • В UI Редуктор uiState.message установлен на ... Получено от UIActions.ShowNotification(...)
  • Эффект в UIEffects, ручка UIActions.ShowNotification чтобы показать снэк-бар ...

Обратите внимание, что это не сработает, если ваша функция находится в лениво загруженных модулях.

Тем не менее, будьте очень осторожны с архитектурой такого типа, чтобы сохранить ваш код в удобном для обслуживания и хорошо организованном виде. Иногда необходимо создать другое родительское состояние или использовать состояние root. (точно так же, как в случае циклических зависимостей).

В противном случае обратите внимание, что вы также можете создавать селекторы для нескольких функций, избегая, таким образом, изменения каждого состояния. (храните единый источник правды) 

export const selectMessage = createSelector(
  selectLoading,  // from UserState feature
  selectMessage,  // from UiState feature
  (loading, message) => {
    return loading ? 'Loading...' : message;
  }
)
...