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

Question

我试图理解 ngrx“带 Prop 的选择器”[ https://ngrx.io/guide/store/selectors#using-selectors-with-props] 。给定的链接中有两个部分。第一部分对我来说很清楚，我可以在我的代码中使用它。我无法理解第二部分 -

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 state 具有名称为 id 的属性，则 state.counter[props.id] 将返回预期值，即counter2 或 counter4。

下面的链接也没有详细解释- https://blog.angularindepth.com/ngrx-parameterized-selector-e3f610529f8

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

Answer 1

关于选择器中的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 引导时创建的 reducer 中定义的形状，该形状将在触发操作时更新。

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.