How to modify object property in redux?

Question

Trying to create a really simple redux todo, almost there but got stuck on one thing.

export const completeTodo = (todo) => ({
  type: 'COMPLETE_TODO',
  data: {
    name: todo,
    complete: !todo.complete
  }
})

however, struggling to get the reducer working as I can't work out how to determine the exact object im working on

reducer:

case 'COMPLETE_TODO': {
   const chore = { ...state.chores, complete: action.data.complete}
   return { ...state.chores, chore };
}

and initialState is:

const initialState = {
  chores: [{name: 'cleaning', complete: false}]
}

obviously when i click my button is should be wired up so it can change the complete boolean to the opposite but only for that one todo

Either identify the todo based on its index in the array, or give it a unique ID and search the array for that. Have you read the official Redux tutorial? It shows exactly how to do this. — Joe Clay
– Joe Clay, Commented Feb 2, 2018 at 14:34

Yury Tarabanko · Accepted Answer · 2018-02-02 14:46:16Z

1

Since you have an array you need to replace it with a new one

case 'COMPLETE_TODO': {
      return {
        ...state,
        chores: state.chores.map(chore => 
         chore.name === action.data.name
         ? {...chore, complete: true /* or !chore.complete if you want toggle like behaviour*/}
         : chore)
      };
    }

and in your action creator

export const completeTodo = (todo) => ({
  type: 'COMPLETE_TODO',
  data: {
    name: todo.name // assumning names are unique
  }
})

edited Feb 2, 2018 at 14:46

answered Feb 2, 2018 at 14:35

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The Walrus Over a year ago

this is what I thought but it's not toggling it or throwing an error :/

Yury Tarabanko Over a year ago

@TheWalrus Glad I could help. Actually I have a typo in my code it should be complete not completed

Collectives™ on Stack Overflow

How to modify object property in redux?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related