Confusion about spread operator kindly guide

JavaScript
1

Hi,

While working with redux i was making reducers but was not able to understand the concept of pure function ,using spread operator, ie to try and keep state free from mutations…

So i wrote the below code , the isEmpty simply returns true or false based on whether there is any null value …


import isEmpty from '../validation/is-empty';

import { SET_CURRENT_USER } from '../actions/types';

const initialState = {
  isAuthenticated: false,
  user: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        isAuthenticated: !isEmpty(action.payload),
        user: action.payload
      };
    default:
      return state;
  }
}

Now i do not understand how using below code prevents state mutation, is it so that the …state is different from state , also does it mean that after i use isAuthenticated: !isEmpty(action.payload), it will update the …state and return updated value, kindly guide , my biggest confusion is whether state and …state are same or different and whether the return code updates the …state , thanks


   return {
        ...state,
        isAuthenticated: !isEmpty(action.payload),
        user: action.payload
      };
2

The one other thing that is confusing me is that if the state never changes then how we get the components change according to new state change as we are not mutating the state, the whole redux thing is extremely confusing, how can we do both , not change the state and still change it and propogate it to components, please guide …

Also if say after an action i get a new value in state , then i need to change it again where is it stored for me to make changes as the original state can not be mutated

Like if i press the minus button twice where does the new state remain before the second click as the original cannot change

Thanks

3

Pure functions are functions which don’t mutate state and produces the same output every time you put in a given input, or not dependent on global state

The spread operator is used to copy a whole array, which we then modify however we like, safe in the knowledge that the original array is unmodified

In redux we do this so we can have an accurate recollection of state change, saved simply as a series of events, very compact and tidy, if we modified state directly it wouldn’t be as workable

Hopefully this helped, lemme know if not

4

@gebulmer - thanks but i have some questions, kindly guide

  1. We have a store where we have a state, we say we cannot mutate it , so does it mean it never changes

  2. In the components we have state too… so if the store state does not change then how does the component state know what has changes

  3. I am confused that if we do not want any change to state how does the change actually gets propogated in redux to react …

5 
 return {
  ...state,
  isAuthenticated: !isEmpty(action.payload),
  user: action.payload
};

Is the same as

return Object.assign({}, {
  isAuthenticated: !isEmpty(action.payload),
  user: action.payload
});

Is the same as

function clone(obj) {
  const copy = {};
  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) {
      copy[attr] = obj[attr];
    }
  }
  return copy;
}

const stateCopy = clone(state);
stateCopy.isAuthenticated = !isEmpty(action.payload);
stateCopy.user = action.payload;
return stateCopy;
1 Like
6

I think the confusion arises because of the word state being used in a different way, so let’s call the redux part a store

In the store we store all the previous states, one after the other, so we have a history of all states

We add the next state to the store based on the most recent state in the store

We don’t want to modify the most recent state as that messes with history, and breaks some of the purposes of the store

We’d then use the redux store to control aspects of the react components, by examining the most recent state for changes

Fwiw I’m not the most experienced person with using them together so I can’t really say more than that, and it’s possible there’s something inaccurate here

7

@DanCouper - thank you so much this was so clear it solved my confusion with spread

@gebulmer - thanks i did not know that each and every state change is saved inside the same single object, that solved my confusion about state