Ngrx 存储选择器无法访问状态

Question

我正在尝试从 MatchState

中的 MatchScoreboard 对象 select homeScore 和 awayScore

export const selectScoreboard = (state: MatchState) => state.scoreboard;

export const selectHomeScore = createSelector(selectScoreboard, (scoreboard) => scoreboard.homeScore);
export const selectAwayScore = createSelector(selectScoreboard, (scoreboard) => scoreboard.awayScore);

我的状态结构：

export interface MatchScoreboard {
    awayScore: number;
    homeScore: number;
}

export interface MatchState {
    scoreboard: MatchScoreboard;
}

export const initialState: MatchState = {
    scoreboard: {
        awayScore: 0,
        homeScore: 0,
    }
};

选择器调用

    store.pipe(select(selectHomeScore));
    store.pipe(select(selectAwayScore));

这个方法可行，但对我来说不够干净

    store.pipe(select('matchState', 'scoreboard', 'homeScore'));
    store.pipe(select('matchState', 'scoreboard', 'awayScore'));

当我尝试使用 selectors 时，我收到以下代码行中 homeScore 和 awayScore 未定义的错误

export const selectHomeScore = createSelector(selectScoreboard, (scoreboard) => scoreboard.homeScore);
export const selectAwayScore = createSelector(selectScoreboard, (scoreboard) => scoreboard.awayScore);

状态已正确更改，除了通过 select 或

获取数据外，一切都很好

Answer 1

正如您对字符串所做的那样 select 或者，您必须首先 select matchState 因为 scoreboard 存在于 matchState.

export const selectMatchState = (state: GlobalStatate) => state.matchState;
// or
export const selectMatchState = createFeatureSelector('matchState')

现在您可以：

export const selectScoreboard = createSelector(selectMatchState, selectScoreboard)

export const selectHomeScore = createSelector(selectScoreboard, (scoreboard) => scoreboard.homeScore);
export const selectAwayScore = createSelector(selectScoreboard, (scoreboard) => scoreboard.awayScore);

Ngrx 存储选择器无法访问状态

Ngrx store Selector cannot access state

angular

ngrx

ngrx-store