Селектор магазина Ngrx не может получить доступ к состоянию

Question

Я пытаюсь выбрать homeScore и awayScore из моего объекта MatchScoreboard в MatchState

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

Этот appraoch работает, но он недостаточно чист для меня

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

Когда я пытаюсь использовать селекторы, я получаю ошибки, которые homeScore и awayScore не определены в следующих строках кода

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

Stateвсе правильно, все хорошо, кроме получения данных через селекторы

Answer 1

Как и в случае с селектором строк, вы должны сначала выбрать 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);