Issue with React Redux array.push

Question

I'm having an issue where when I try to update an array in the store by using .push(newvalue). When I push the new value the state is updated from an array to being the value of the length of the array.

State before update: ['asd', 'sdf', 'wer']

State after: 4

action:

export function updateLocalCompliments(newCompliment) {
  return ({
    type: LOCAL_COMPLIMENT,
    payload: newCompliment
  })
}

reducer: (state.compliments is the actual array)

const INITIAL_STATE = {
  compliments: []
}

function compliments(state=INITIAL_STATE, action) {
      switch (action.type) {
        case LOCAL_COMPLIMENT:
          return (
            Object.assign({}, state, {
              compliments: state.compliments.push(action.payload)
            })
          )
        default:
          return state;
      }
    }

push does not return the mutated array but its updated length. You will need to handle this differently: developer.mozilla.org/de/docs/Web/JavaScript/Reference/… — m90
– m90, Commented Oct 4, 2017 at 18:10
push shouldn't be used with react-redux as it mutates the array — MinusFour
– MinusFour, Commented Oct 4, 2017 at 18:10

Daniel · Accepted Answer · 2017-10-04 18:10:52Z

4

It is because the push method modifies the array it is called on and returns the new length. What you want is something like concat().

push: https://www.w3schools.com/jsref/jsref_push.asp

concat: https://www.w3schools.com/jsref/jsref_concat_array.asp

compliments: state.compliments.concat(action.payload)

answered Oct 4, 2017 at 18:10

Daniel

2,05313 silver badges17 bronze badges

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

2 Comments

Morishiri Over a year ago

And here is some branchmark to compare what's the fastest array clone way: jsperf.com/new-array-vs-splice-vs-slice/31

Aaron Over a year ago

That worked! Thanks for a clear explanation and resources for even more clarification.

Collectives™ on Stack Overflow

Issue with React Redux array.push

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