The Beginner’s Guide to Understanding React Native Redux – Part 1

After coming across this post you must be asking yourself, Do I need to understand Redux? To get answer to this question, ask yourself, if you want to be a good React Native developer. If answer is yes, then you definitely need to understand Redux in-dept.

Why is Redux important for React Native ?

Well, React’s design pattern is such that,  when you plan to take your project to next level, you will feel the need to add redux to it.

React design is component based. Now, suppose you want to change state of a component by triggering it from another component,  then redux will come to your rescue.

Understanding Redux the dummy way

I am a self made programmer. I find it bit difficult to understand the jargons and verbiage used by advance celebrity developers. So, to find my own way to understand and remember this concept, here’s how I look at Redux (, and pardon me if I am wrong about it )

Redux is combination of global variable and function. We supply parameter to the global function and it calculates the new value of the variable and update things globally. Now, something very important to notice here is, the value of variable itself is not changed, but, a new value is calculated from it. This process has a special term for it called immutability.

Even though we can understand redux in a simple way ( i.e. function and variable ) but it’s pattern is quiet different and is spread in different layers. Main layers of redux are :

1. Action Type
2. Action
3. Action Creator
4. Reducer
5. Store

Now, lets understand these layers in a simple way by an example. We will be making a simple counter using React Native and Redux. Before moving ahead, lets look at how analogy (redux) function counter looks like :

function reduxCounter(action,state = 0){

     switch(action){    

     case 'increment':
        return state + 1        
        break;
     case 'decrement':
        return state - 1
        break;
     default:
        return state

}

Lets see how the above counter function looks like in redux pattern :

Action Type

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

Action types are nothing but string constants. We can name it after actions that we want are redux app to perform.

Action

{
  type: INCREMENT,
  text: 'Increase counter by one'
}

{ 
  type: DECREMENT, 
  text: 'Decrease counter by one' 
}

Actions are nothing but json objects in which we must have’ type’ property. We can have more properties if we need, but, we cannot skip type property.

Action Creator

function increment(param) {
  return {
    type: INCREMENT,
    text: param
  }
}

function decrement(param) { 
   return { 
     type: DECREMENT, 
     text: param 
  }
}

Action creators are functions that return action.

Reducer

export default (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1
    case DECREMENT:
      return state - 1
    default:
      return state
  }
}

The reducer is a function in which we perform operation on value of state and return a new value.

Store

Store is where we keep the global state of a redux app in json format.

Conclusion

So, we can understand  that concept of redux is nothing but broader version of a simple function which  in itself comprises of many functions, constants and data flow login spread across multiple layers in a systematic way. In the next part of  tutorial we will build a complete working Couter App which we discussed in small parts in this tutorial.