What I understand is that there is a concept of "Pure functions" which I got explained in this video and this question What is pure functions?

However I have encountered the term "Pure reducers" in the context of flux/redux I read on this link

But I'm not entirely sure how to apply this "pure concept" to reducers, what is a pure reducer?

What I understand is that there is a concept of "Pure functions" which I got explained in this video and this question What is pure functions?

However I have encountered the term "Pure reducers" in the context of flux/redux I read on this link

But I'm not entirely sure how to apply this "pure concept" to reducers, what is a pure reducer?

• javascript
• reactjs

• 2 a reducer is a function. a specific kind of one, but just a function. same thing. A rose by any other name... – dandavis Commented May 26, 2016 at 8:15
• Reducer is a function, so that's just a more specific name. – Omri Aharon Commented May 26, 2016 at 8:16

3 Answers 3

Here is my understanding, in terms of redux a reducer is a function which accepts two arguments (state, action).

 1. state represents the current state of the application in store
 2. action represents the action that triggered

Redux assumes that the reducers does accept the current state and don't mutate the state but returns the new state, depending on the action type. If it adheres and don't mutate the state then it is a pure reducer.

/********************** example of a pure reducer *****************************/

 var initialState = {counter:0};
 function counterReducer(state = initialState, action){
     if (action.type === 'INCREMENT'){
         // returns a new state incrementing a counter
         return {counter:state.counter + 1};
     }
     else if (action.type === 'DECREMENT'){
         // return a new state decrementing a counter
        return {counter:state.counter - 1};
     }

     //  returns the state as is
     return state;
 }

The above function has no side-effects whenever it is invoked with the same set of arguments it always returns the same output.

/********************* example of an impure reducer ***************************/

var initialState = {counter:0};
 function counterReducer(state = initialState, action){
     if (action.type === 'INCREMENT'){
         // modifies state by mutating or incrementing the counter in state
         state.counter++;
     }
     else if (action.type === 'DECREMENT'){
         // modifies state by mutating or decrementing the counter in state
        state.counter--;
     }

     //  returns the state
     return state;
 }

Another form of impure reducer would be one that doesn't return the same value given the same arguments. So using Dhananjaya Kuppu's example:

return {counter: state.counter + Math.floor(Math.random())}

a reducer is simply a function that is passed as an argument to the reduce function of an array. For example:

const sumReducer = (acc, x) => acc + x
const multReducer = (acc, x) => acc * x

const sumResult = [1,2,3,4,5].reduce (sumReducer, 0)
const multResult = [1,2,3,4,5].reduce (multReducer, 1)

That's basically a reducer.