Ищу помощь в понимании ngrx "селекторы с реквизитом" - PullRequest
Новая
       12

Ищу помощь в понимании ngrx "селекторы с реквизитом"

1 голос
/ 11 июля 2019

Я пытаюсь понять ngrx "селекторы с реквизитом" [https://ngrx.io/guide/store/selectors#using-selectors-with-props].. В этих ссылках есть две части. Первая часть мне понятна, и я мог бы использовать ее в своем коде. Я не мог понять вторую часть -

Имейте в виду, что селектор сохраняет только предыдущие входные аргументы в своем кеше. Если вы повторно используете этот селектор с другим умножением фактор, селектор всегда должен будет переоценить его значение. это потому что он получает оба множителя (например, один раз 2, в другой раз 4). Чтобы правильно запомнить селектор, заверните селектор внутри фабричной функции для создания разных экземпляров селектора.

Ниже приведен пример использования нескольких счетчиков, дифференцированных по номеру 

export const getCount = () =>
  createSelector(
    (state, props) => state.counter[props.id],
    (counter, props) => counter * props.multiply
  );

ngOnInit() {
  this.counter2 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter2', multiply: 2 }));
  this.counter4 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter4', multiply: 4 }));
  this.counter6 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter6', multiply: 6 }));
}

В приведенном выше коде, (state, props) => state.counter[props.id], часть, которую я не мог понять. Может ли кто-нибудь помочь в понимании (state, props) => state.counter[props.id] в сочетании с использованием в ngOnInit?

Мне кажется, что state.counter[props.id] вернет ожидаемое, если counter состояние имеет свойства с именем как id т.е. counter2 или counter4.

Следующая ссылка также не объясняет в деталях - https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

Краткий пример будет очень полезен.

1 Ответ

1 голос
/ 11 июля 2019

О кеше memoize в селекторе:

Возвращает последнее кэшированное значение, если оно впоследствии вызывается с теми же параметрами. 

export const getCount = () =>
  createSelector(
    (state, props) => state.counter[props.id],
    (counter, props) => counter * props.multiply
  );

ngOnInit() {

// Calculate selector params (counter2, 2)  and return value
this.counter2 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter2', multiply: 2 })); 

// Calculate selector params (counter4, 4) and return value
this.counter4 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter4', multiply: 4 }));

// Get Cached selector params (counter4, 4) and return value
this.counter5 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter4', multiply: 4 })); 

// Calculate selector params (counter6, 6) and return value
this.counter6 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter6', multiply: 6 })); 

// Calculate selector params (counter4, 4) and return value
this.counter8 = this.store.pipe(select(fromRoot.getCount(), { id: 'counter4', multiply: 4 }));
}

О состоянии

Состояние будет иметьФорма, которую мы определяем в редукторах, которая создается при загрузке AppModule, которая будет обновляться при запуске Action.

export const initialState: State = {
  home: 0,
  away: 0,
};

const scoreboardReducer = createReducer(
  initialState,
  on(ScoreboardPageActions.homeScore, state => ({ ...state, home: state.home + 1 })),
  on(ScoreboardPageActions.awayScore, state => ({ ...state, away: state.away + 1 })),
  on(ScoreboardPageActions.resetScore, state => ({ home: 0, away: 0 })),
  on(ScoreboardPageActions.setScores, (state, { game }) => ({ home: game.home, away: game.away }))
);

export function reducer(state: State | undefined, action: Action) {
  return scoreboardReducer(state, action);
}

Ваше предположение верно, состояние передается на selector (первый параметр).

It appears to me that state.counter[props.id] will return expected if counter state has properties with name as id i.e counter2 or counter4.
...