React Native Tutorial Using Redux

In React Native applications, state management is the most important part. Data must interact with every parent-child component in the application. For this, Redux came into existence.

Redux is a state container for JavaScript applications. It helps the user to write applications that work perfectly, can run in various environments and are easy to test. The use of Redux is that we can use one application state as a global state in the application.

Let us have an idea of how to use Redux in the React Native Application with an example.

Step: 1) Initiate the project

Go to the folder you want to initiate the project and run following commands,

1) react-native init MyReduxDemo

2) cd MyReduxDemo

Now test if the project is set up properly, run these following commands 

react-native run-android //for android

react-native run-ios //for ios

So now we will install the redux and react-redux library.

1) yarn add react react-redux

or

2)npm install redux react-redux --save

Step: 2) Edit the App.js and add a textbox and a button
add an "onPress" event on the button which print "submitted" in the log. and also add a state, which will consist of a username and a user array.

Step: 3) Create 3 folders in the root

a)actions 
b)reducers
c)components

Create a type.js file and edit it.

This file contains actions and based on their type , the reducer case will be executed and update the state accordingly.

Now create a user.js file in the same directory.

The addUser() function here will return action and based on this action, the reducer case will get executed. Here, data will be stored in payload and will get passed along with the action.

But without a store, data will not be stored. And, we have to connect the App.js with this action. Reducer is also needed for the execution of the action.

Step: 4) Create a reducer file in the reducers folder and write the code

Now, import creates store and combineReducers from redux. combineReducer is used when our project consists of more than one reducers. Let's give userReducer a name to identify it from all the reducer which is users. You can give anything you like. at last, pass your rootReducer into the createStore.

lets, pass the store to our React Native application.

Step: 6) Pass the store

When a store is create it is passed to the root component of the project so that it can be used globally inside the whole application.

Here we take Provider as a root element and the store is passed into it.

See the index.js file.

Step: 7) Connect the App.js

Import connect from react-redux, and that screen will be connected with the store.

Here, let's use onChangeText to set the text into the state variable username.

In the handleSubmit event, check whether the textbox is empty or not. And then send the dispatch method.

So that action returned the object with its action type and the payload and based on the type  the reducer will execute and it will add that values inside the store.

• mapStateToProps we  use it to see immediate change when the store values are changed.
• mapDispatchToProps it helps us to connect our application to the action which is required.
• For  rendering  the list of users, let’s create a new function and pass it to the Flatlist component in it.

At last , our  ListItem component will be used to display the list of users which are stored in the store using React Redux.

So your first React Native application in which  Redux has been used and it is completed now.