React Native Tutorial Using Redux
Posted By : Gaurav Singh | 15-Apr-2020
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.
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
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
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.