Блог

У меня есть настройка состояния NGRX, которая является объектом значений. Ключи значений представляют собой числа (1-5) с логическим значением.

state.ts

 export interface State {
  1: boolean;
  2: boolean;
  3: boolean;
  4: boolean;
  5: boolean;
}

export const initialState: State = {
  1: true,
  2: true,
  3: true,
  4: true,
  5: true,
}
 

У меня также есть действие, которое передает через него значение номера объекта. Итак, в моем редукторе я беру числовое значение, нахожу это значение в объекте и переключаю логическое значение. Однако я сталкиваюсь с проблемой, из-за которой я не могу выбрать ключ объекта в своей функции редуктора, фактически не вводя физическое число.

action.ts

 export const changeButtonState = createAction(
  '[Bingo Actions] Change Button State',
  (payload: number) => ({payload}),
);
 

reducer.ts

 export const reducer = createReducer(
  initialState,
  on(BingoActions.changeButtonState, (state, action) => {
    return {
      ...state,
      action.payload: !state[action.payload],
    };
  })
);
 

Как я могу получить доступ к числовому значению объекта без необходимости физического ввода числа в функции редуктора?

Забыл, что это был объект в состоянии, и просто нужно было настроить редуктор, чтобы добавить скобку вокруг действия.назначение полезной нагрузки.

Обновлен reducer.ts

 export const reducer = createReducer(
  initialState,
  on(BingoActions.changeButtonState, (state, action) => {
    return {
      ...state,
      [action.payload]: !state[action.payload],
    };
  })
);
 

Вычисленные имена свойств для ключей вашего объекта — https://ui.dev/computed-property-names /

 export const stateKeys = {
  one: 1,
  two: 2,
  ...
 

 export interface State {
  [stateKeys.one]: boolean;
  [stateKeys.two]: boolean;
...
 

Затем для доступа к свойству с вычисляемым именем внутри вашего редуктора синтаксис:

 state[stateKeys.one]