CODEWITHSUNDEEP
javascriptreactjsecmascript-6reduxreact-redux
Reacting
Reacting

Reputation: 6123

On Redux: How can I change the state of a boolean within an array?

Normally I see stuff like this on a Reducer:

const initialState = {
  thisIsBoolean: false,
};

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

export default createReducer(initialState, handlers);

Action:

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

But I need to do something like this now: Reducer:

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,
    };
  },
}

Action:

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

So I need to do something to return the state and toggle the isDone property within stepOneCardSelected.

What can I do?

Upvotes: 0

Views: 182

Answers (1)

Code Maniac
Code Maniac

Reputation: 37755

You can map through your selectedCard in state and toggle 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}))
    };
  },
}

Upvotes: 1

Related Questions