Introduction To Redux(using React Native)

React Native is a latest Framework developed by Facebook to create Native Mobile Apps of iOS and Android using Javascript with the help of following concept of Learn Once , Write Anywhere. Its just a simple framework to develope Mobile Apps with Native Look and Feel. In Current Time many big companies are using React Native to develope their Mobile Apps like: FB-Add, AirBnb etc. At time of writing this stable version of React Native is 0.46 is used. There are still some improvements are required in its React Native but it latest version is stable and covering many complex aspects of both platform: iOS and Android.

Redux, is just a simple architecture to handle data flow and state management to help in making smooth updation in data shown in UI.It is not necessary to use Redux with React Native, but React-Native is simpley handling the UI part of apps. so we need a flow or Architecture to handle the data flow and way in data updation can be shown on UI in much more smooth way and doesn’t effect user interaction badly. To fullfill this Requirement Redux is much more useful.

There are Three Pillars of Redux:

1. ActionTypes
2. Action
3. Reducers

and One More most important thing is State. Above three pillars are playing a very important role in changing and updating that State. and If we talk about use of Redux in React Native: then its changes in State always bring change in UI and update the value of data with current value of State to show update data on UI.

ActionTypes are simple a type of Variable which are Indicating that which types of Action are dispatching. Now there is new keyword dispatch is used, dispatch is simply a function imported from redux module which is used to dispatch action Object defined in action.js File.

export const ADD_TASK_SERVICE_INIT = "ADD_TASK_SERVICE_INIT";
export const ADD_TASK_SERVICE_SUCEESS = "ADD_TASK_SERVICE_SUCEESS";
export const ADD_TASK_SERVICE_FAILURE = "ADD_TASK_SERVICE_FAILURE";

Action are simple object which are returning an object value having a a key type to contain the value of ActionType and other one is optional which is containing data/error accroding to its action type.

export function addTaskServiceInit() {
   return {
   type: ADD_TASK_SERVICE_INIT
   };
}
export function addTaskServicSuccess(data: any) {
   return {
   type: ADD_TASK_SERVICE_SUCCESS,
   data: data
   };
}
export function addTaskServiceFailure(error: any) {
   return {
   type: ADD_TASK_SERVICE_FAILURE,
   error: error
   };
}

Reducer, last but most important part of Architecture, which are simple functions taking two arguments: state and action and mutuate the initail state according to actionType. these Function is Returnig an update value of State to Combined Reducer managing all the state of whole App.

const initialState = {
ToDoList: []
isLoading: false,
isLoaded: false,
isError: false,
error: Object,
pageNo: 1
};
export default function (state = initialState, action: any) {
switch (action.type) {
   case types.ADD_TASK_SERVICE_INIT:
   return {
      ...state,
      isLoading: true,
      isError: false,
      isLoaded: false
   };
   
   case types.ADD_TASK_SERVICE_SUCCESS:
   return {
      ...state,
      ToDoList: action.data,
      isLoading: false,
      isError: false,
      isLoaded: true
   };
   
   case types.ADD_TASK_SERVICE_FAILURE:
   return {
      ...state,
      isLoading: false,
      isError: true,
      isLoaded: true,
      error: action.error
   };
return state;
}

So these three pillars are working togetther to update state value according to values coming from API’s calls and other sources. And then Connect function is used to connect that data part with UI part of App. it changes the dumb component to smart component. According to concept of React, there are two type of Component , one is simply dealing with UI component and other one is also handling with data comping from Api along with UI. First One is known as Component(Dumb Component) while Second one is Known as Container(Smart Component). In other words we can say that when we used Connect in Component then it turn to Container means now it is handling the data flow and updation which is coming from Api.

Now along with Connect function there are two more function:

1. mapStateToProps
2. mapDispatchToProps.

Before discussing about these two topics, First We Will discuss about State and Props: I think We already discussed some initial Info about State so now we will consider what is props: props is just a short form of Properties, props is just a way to transfer data from two component and generally props are passing the data from Parrent Component to Child Component. means if we have to pass value of any varaible declare or used in Parrent component to child component then we just declare a props with a specific name and assing that value in that and access that value in child Component with that specfic name which we pass at time rendering that Child Component. We can also pass a function in props to Child Component.

Now Come to that two function, 1. mapStateToProps: as name denotes this function is used to just mapping the values of State in any components Props. We use these two function, because we can’t directly access action declates in actions.js and value of state declare in combined Reducers. so we need to first map values of state and action in props and then access these in component with help of Props like: this.props.(action or state). 2.mapDispatchToProps: as name denotes this function is used to maps action declares in action.js in props so that we can call these function just by importing them from their parrent file and access them with help of this.props.(action name)

function mapStateToProps(state: MainStoreState) {
return {
   taskList: state.ToDoList.taskList,
   isLoading: state.ToDoList.isLoading,
   isError: state.ToDoList.isError,
   error: state.ToDoList.error,
   isLoaded: state.ToDoList.isLoaded
 };
}
function mapDispatchToProps(dispatch: any) {
 return {
   onClickAddTask: (payload: Object) => {
     dispatch(addingTask(payload));
   },
   onClickDeleteTask: () => {
     dispatch(deleteTask());
   }
 };
}
export default connect(mapStateToProps, mapDispatchToProps)(TaskListScreen);

In above Code snippet, we take an example of simple ToDoList, in mapStateToProps, we are accessing the values of updated taskList coming after dispatching each action from user and value of state change in App State in Combined Reducers and in mapDispatchTpProps, we are using two action which handle user interraction on click of Add Task and Delete Task Button. In Last Line we are just using connect to bind these two functions with our component TaskListScreen.