the spread operator in Redux reducer

Question

I am trying to understand what does spread operator do in Redux state?

I went through this question Purpose of the Spread syntax in React-Redux Reducers but wasn't convince with Answer for some reason.

Can someone please explain me in very simple terms why do we do something like this

  case WHATEVER:
      return {
        ...state,
        DateSucess: action.payload,

Instead of just

 case WHATEVER
  return {
   DataSucess: action.payload

what if reducer state is an object with multiple keys like: `{DataSucess: '', a: '', b: '', c: ''}`, and if you return only one key-value, then all other key-value pairs will be lost. purpose of spread operator is to return the whole object and update one value. — Mayank Shukla, Oct 08 '18 at 12:22
What if it is just a boolean value? and it is independent of all other key-value pairs? — Alwaysblue, Oct 08 '18 at 12:23
@MayankShukla can you explain it in details in the answer section? — Alwaysblue, Oct 08 '18 at 12:24
Possible duplicate of [Spread Syntax ES6](https://stackoverflow.com/questions/34559918/spread-syntax-es6) — Bhojendra Rauniyar, Oct 08 '18 at 12:35

score 18 · Accepted Answer · edited Jun 16 '20 at 16:41

The spread operator does the same as in ES6, is still the same behaviour (check the MDN docs).

About the motivation to use the ...state the idea is simple: Keep the old state and add or overwrite the DateSucess property.

So let's say:

const state = {foo: 'bar', DateSucess: 'oldDateSuccess', zip: 'zap'}

If you don't use spread the new value of state would be only DateSucess and you would lose the foo and zip value, using spread you are just overwriting DateSucess keeping the rest of the value untouched.

This spread would be equivalent to the following with Object.assign

return Object.assign(oldState, {DateSucess: 'newDateSucess'})

score 3 · Answer 2 · answered Oct 08 '18 at 12:40

Spread operator simply return copy of array or obj associated with is. Look into example below

const abc = {
  'first_key':1,
  'second_key':2,
}

const newObj={...abc} //will COPY abc

const newObjWithNewKey = {...abc,  'first_key':'01 first','new_key':'007'} // will COPY abc and value of first_key will be replaces with new value as it exists. will add new keyvalue pair new_key.

console.log("abc",abc,"newObj",newObj,"newObjWithNewKey",newObjWithNewKey)

Now in redux if you just return new payload then you will lose other state values. but if you use ... means you tell js that copy existing state and update values of specified keys if there is no key then add new one

score 1 · Answer 3 · answered Oct 08 '18 at 12:49

Assume that your state structure looks like this:

const initialState = {
    DateSucess: ' ',
    DateFailure: ' '
}

Well then, with that state, now we write a reducer and..

The reducer is a pure function that takes the previous state and an action, and returns the next state.

In the reducer, we make some calculation and return the next state. Keeping in mind that, we don't mutate the state. We create a copy with Object.assign().

Object.assign(state, { DateSucess: action.payload}) is also wrong: it will mutate the first argument. You must supply an empty object as the first parameter. Like this:

return Object.assign({}, state, { DateSucess: action.payload})

You can also enable the object spread operator proposal to write { ...state, ...newState } instead. In your case, it will look like:

return {...state, DateSucess: action.payload}

For more information: https://redux.js.org/basics/reducers

or if your payload value matches your return value `return { ...state, ...action.payload };` — Sebastian Thomas, Sep 23 '19 at 14:13

score 1 · Answer 4 · answered Apr 05 '21 at 05:26

If you are using react and asking about react-redux, here might be the answer for you-

We shouldn't mutate a state inside the reducers. With spread operator, we make a copy of the previous state and update the copy of it. So that, we aren't mutating our prev state and at the same time, updating it. This is the function of spread operator.

Now, another question may arise. Why we can't mutate in reducers. Well that's a 'react' thing to me. React creates virtual dom for handling manipulations of doms. If you alter the internal state, the sync of dom and virtual dom may break and things will go bad.

Hope this description helps you.

the spread operator in Redux reducer

4 Answers4