寻求帮助以了解 ngrx "selectors with props"

Question

我正在尝试了解 ngrx "selectors with props" [https://ngrx.io/guide/store/selectors#using-selectors-with-props]。在给定的 link 中有两个部分。第一部分对我来说很清楚，我可以在我的代码中使用它。我无法理解第二部分 -

Keep in mind that a selector only keeps the previous input arguments in its cache. If you re-use this selector with another multiply factor, the selector would always have to re-evaluate its value. This is because it's receiving both of the multiply factors (e.g. one time 2, the other time 4). In order to correctly memoize the selector, wrap the selector inside a factory function to create different instances of the selector.

The following is an example of using multiple counters differentiated by id.

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 中的用法吗？

在我看来，如果 counter 状态具有名称为 id 的属性，即 counter2 或 [=19=，则 state.counter[props.id] 将 return 预期].

下面的link也不详细解释了-https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

一个简短的例子会很有帮助。

Answer 1

关于选择器中的 memoize 缓存：

它returns如果随后使用相同的参数调用最后一个缓存值。

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 }));
}

关于状态

State 将具有我们在 reducers 中定义的形状，它是在 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.

寻求帮助以了解 ngrx "selectors with props"

Seeking help in understanding ngrx "selectors with props"

angular

ngrx

ngrx-store

关于选择器中的 memoize 缓存：

关于状态