ReactJS/Redux - Pure vs Impure Javascript functions?

Question

I have gone through the definitions of the Pure and Impure Javascript functions in the ReactJs Official Docs.

Pure functions are ones that do not attempt to change their inputs, and always return the same result for the same inputs.

Example

function sum(a, b) {
  return a + b;
}

Impure function is one that changes its own input.

Example

function withdraw(account, amount) {
  account.total -= amount;
}

Now, can somebody tell me, how can I mistakenly make functions impure in React/Redux, where pure functions are required?

Impure functions have side effects. Something like window.getElementById etc so running the same function with the same parameters can have different results depending on the side effects. Which is where redux would fail. — Dominik
– Dominik, Commented Mar 19, 2020 at 5:21

Fred · Accepted Answer · 2020-03-29 11:06:44Z

React and Redux both need pure functions coupled with immutability to run in a predictable fashion.

If you don't follow these two things, your app will have bugs, the most common being React/Redux not able to track changes and unable to re-render when your state/prop changes.

In terms of React, consider the following example:

let state = {
    add: 0,
}

function render() {
    //...
}
//pure function
function effects(state,action) {
//following immutability while updating state, not directly mutating the state.
    if(action == 'addTen') {
        return {...state, add: state.add + 10} 
    }
    return state;
}

function shouldUpdate(s) {
    if(s === state){
        return false
    }
    return true
}

state = effects(state, 'addTen')if(shouldUpdate(state)) {
    render();
}

The state is held by the state object which has only added property. This app renders the app property. It shouldn't always render the state when anything happens but should check whether a change occurred in the state object.

Like so, we have an effects function, a pure function which we use to affect our state. You see that it returns a new state when the state is to be changed and returns the same state when no modification is required.

We also have a shouldUpdate function which checks using the === operator whether the old state and the new state is the same.

To make mistakes in terms of React, you can actually do the following :

function effects(state,action) {

  doRandom(); // effects should only be called for updating state.
             // Doing any other stuff here would make effects impure.

    if(action == 'addTen') {
        return {...state, add: state.add + 10}
    }
    return state;
}

You can also make mistakes by setting the state directly and not using effects function.

function doMistake(newValue) {
    this.state = newValue
}

The above should not be done and only effects function should be used to update the state.

In terms of React, we call effects as setState.

For Redux:

Redux's combineReducers utility checks for reference changes.
React-Redux's connect method generates components that check reference changes for both the root state and the return values from mapState functions to see if the wrapped component actually needs to re-render.
Time-travel debugging requires that reducer be pure functions with no side effects so that you can correctly jump between different states.

You can easily violate the above three by using impure functions as reducers.

Following is taken directly from redux docs:

It's called a reducer because it's the type of function you would pass to Array.prototype.reduce(reducer, ?initialValue).
It's very important that the reducer stays pure. Things you should never do inside a reducer:

Mutate its arguments;
Perform side effects like API calls and routing transitions;
Call non-pure functions, e.g. Date.now() or Math.random().

Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.

Fred · Accepted Answer · 2020-03-29 11:05:40Z

Simply said the state cannot be mutated. A new instance of the state should be returned every time there is a change so

This code is not correct :

const initialStates = {    
  items: ['item1']
}

export const ItemMaster = (state = initialStates, action) => {    
  switch (action.type) {
    case TYPES.ADD_ITEM:            
    {
        state.items.push(action.item)
        return state
    }
    default:
      return state
  }
}

This code when written as a pure function below, This returns a new instance of the array it does not modify the actual array itself. This is the reason you should use a library like immer to handle immutability

const initialStates = { 
  items: ['item1']
}

export const ItemMaster = (state = initialStates, action) => {    
  switch (action.type) {
    case TYPES.ADD_ITEM:            
    {

        state = {...state,items:state.items.concat(action.item)}
        return state
    }
    default:
      return state
  }
}

Fred · Accepted Answer · 2020-03-29 11:07:34Z

You could make pure functions impure by adding API calls or writing codes that result in side effects.

Pure functions should always be on point and self-explanatory, and should not require you to refer 3 or 4 other functions to understand what's going on.

// Pure Function
function USDtoEUR(USD, todayRate) {
  return USD * todayRate;
}

// Impure Function 
function USDtoEUR(USD) {
  const todayRate = getTodayRate();
  return USD * todayRate;
}

In case of React / Redux

const mapState = async state => {
  const { data } = await whatDoINeed()

  let mappedState = {}

  if (data.needDolphin) {
    mappedState.dolphin = state.dolphin
  }

  if (data.needShark) {
    mappedState.shark= state.shark
  }

  return mappedState;
}

// Or for Redux Reducer
// Bad
{
  setData: (state, payload) => {
   const set = whatToSet()
   return {
     ...state,
     set.dolphin ? ...{ dolphin: payload.dolphin } : ...{},
     set.shark ? ...{ shark : payload.shark } : ...{},
   }
  }
}

// Good
{
  setData: (state, payload) => {
   return {
     ...state,
     // Just send only the things need
     // to be sent
     ...payload
   }
  }
}

This should not be done. Everything a connect function or reducer function needs must be supplied through argument or written within its function. It should never get from outside.

Collectives™ on Stack Overflow

ReactJS/Redux - Pure vs Impure Javascript functions?

3 Answers 3

In terms of React, consider the following example:

For Redux:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

In terms of React, consider the following example:

For Redux:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related