0

I am working on the reducer file which looks like this:

export default (state = [], action) => {
  let index

  switch (action.type){

    case "ADD_QUOTE":
     return [...state,action.quote]

    case "REMOVE_QUOTE":
      return state.filter(q=>q.id !==action.quoteId)

    case "UPVOTE_QUOTE":

       index = state.findIndex(quote => quote.id === action.quoteId);
       let quote = state[index];

       return [
         ...state.slice(0, index),
         Object.assign({}, quote, { votes: quote.votes += 1 }),
         ...state.slice(index + 1)
       ];


    default: 
    return state
}
  }

I have two ways to implement case UPVOTE_QUOTE, the first one is in the above code, and the second one looks like this:

...
    case "UPVOTE_QUOTE":
       let quote = state.find(q=>q.id===action.quoteId)
       quote.votes +=1
       return state
...

I wonder what is the difference. And in the second situation, what I am not sure is, if I change the votes property in that one quote element in state, when I return the state, will it be the state with the new quote? And is this state the original state or a new state that refers to a new place? Very confused...

Yingqi
  • 985
  • 2
  • 13
  • 24

1 Answers1

1

The first option looks to be correct. The second option would be mutating the state.

These links that may help explain further: Mutating Redux State Consequences and Why cant state be mutated....

devspeter
  • 516
  • 4
  • 7