Defining reducer functions

Redux reducers are pure functions. That means, they have no side-effects. Given the same arguments, the reducer must always generate the same shape of state. Take for example the following reducer function:

const reducer = (prevState, action) => { 
    if (action.type === 'INC') { 
        return { counter: prevState.counter + 1 } 
    } 
    return prevState 
} 

If we execute this function providing the same arguments, the result will always be the same:

const a = reducer( 
   { counter: 0 }, 
   { type: 'INC' }, 
) // Value is { counter: 1 }  
const b = reducer( 
   { counter: 0 }, 
   { type: 'INC' }, 
) // Value is { counter: 1 } 

Note

However, take into account that even though the returned values have the same shape, these are two different objects. For instance, comparing the above:console.log(a === b) returns false.

Impure reducer functions prevent your application state from being predictable and make difficult to reproduce the same state. For instance:

const...