В Redux: Как я могу изменить состояние логического значения в массиве?

Question

Обычно я вижу такие вещи на редукторе:

const initialState = {
  thisIsBoolean: false,
};

const handlers = {
  [ActionTypes.CARD_SELECTED](state, action) {
    return {
      ...state,
      thisIsBoolean: !state.thisIsBoolean,
    };
  },
};

export default createReducer(initialState, handlers);

Действие:

export const booleanExample = () => ({
  type: ActionTypes.CARD_SELECTED,
});

Но мне нужно сделать что-то вроде этого сейчас: Разбавление:

const initialState = {
  stepOneCardSelected: [
    { index: 0, isDone: false },
    { index: 1, isDone: false },
    { index: 2, isDone: false },
    { index: 3, isDone: false },
  ],
};

const handlers = {
  [ActionTypes.CARD_SELECTED](state, action) {
    return {
      ...state,
      stepOneCardSelected: action.payload.stepOneCardSelected,
    };
  },
}

Действие:

export const stepOneCardSelectedAction = stepOneCardSelected => ({
  type: ActionTypes.CARD_SELECTED,
  payload: { stepOneCardSelected },
});

Так что мне нужно что-то сделать, чтобы вернуть состояние и переключить свойство isDone в stepOneCardSelected.

Что я могу сделать?

Answer 1

Вы можете отобразить через selectedCard в состоянии и переключить isDone

const initialState = {
  stepOneCardSelected: [
    { index: 0, isDone: false },
    { index: 1, isDone: false },
    { index: 2, isDone: false },
    { index: 3, isDone: false },
  ],
};

const handlers = {
  [ActionTypes.CARD_SELECTED](state, action) {
    return {
      ...state,
      stepOneCardSelected: state.stepOneCardSelected.map(({index,isDone})=>({index,isDone: !isDone}))
    };
  },
}