Why Do We Need Global State ?
If we want to pass a data to a component from another one, we have few options. If they have a relation then it’s easy, we just pass the data as a prop. But as the complexity grows it is harder to track down the component tree and props. What if the components don’t have a relation? That’s where global state comes into play. Imagine Redux global store as a component at higher level than all of your componets and you can pass and fetch any data from there via actions and reducers at any level. In this article we will show you how to add and use Redux in your React Native App.
How To Install React-Redux
Open your project folder in your terminal and run commands below.
npm install redux react-redux redux-persist @react-native-community/async-storage --save
What Are Reducers and Actions ?
A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change.
As you go deep in Redux, you’ll find out that all you’re going to do will be in reducers and actions. If you can grasp these concepts well, you’ll master redux in no time. Let’s start.
Write Your First Reducer
Let’s create a folder named redux **in project level and inside that two more folders named **actions **and **reducers. **In reducers folder create a file. Let’s name it **userReducer. We’ll use this reducer to pass down a string(name) and a boolean(loggedIn) value.
At the top we will define an Initial state for default values. After that we’ll define our reducer.
Our reducer will have two parameters. First one is our state and the second one is the action that triggers our state changes. We change our state based on the type of action.
Write Your First Action
In actions folder create a file named userActions. We have two actions, first one is for passing down the username to the reducer and second one is for resetting the reducer.
Root Reducer
If you have more than one reducer in your app then you need to create a root reducer to combine all your reducers. In reducers folder create another file named rootReducer.
Note that when you export, left side of the object is how you will call the reducer state in components.
What is Redux-Persist ?
If you want to keep your data in redux even if you close your app you need redux-persist. In redux-persist you can decide which data you’ll keep and which data you’ll lose.
In redux folder create a file named store.
Now it’s time to wrap our app with the store we created.
Let’s open our App.js file. To access redux data from all components we should wrap our app with Provider and give store as a prop.
And for redux-persist, at a level below we wrap our app with PersistGate and give persistor as prop and set loading prop as null.
Now we’re ready to use our reducers and actions in our app.
So let’s use them.
What are MapStateToProps and MapDispachToProps ?
How To Send Data To Redux Store?
In this example we have a text input and a button for user to type their name and proceed with their name. We have a component called landingPage. In this file before we use actions we have to import them.
For triggering the action we need to use **mapDispatchToProps **function and to get the data from redux store we need to use **mapStateToProps **function.
**Dispatch **is a function that will trigger our actions. We pass a parameter to the reducer.The reducer will use that parameter once the action is triggered.
Using action is quite easy. We just need to define it from props and use it as a function. As you can see in the image above we pass the username state as parameter and call action. This will trigger our action and go to the reducer with the username data.
How To Receive Data From Redux Store?
We have a second page to show user name in another component.
For getting the data from redux store we need to use **mapStateToProps **function. We will get user from state of our store.
And for logout we also define resetUserAction.
Using data from redux store is also quite easy. Like action; just define it from props and use it wherever you want.
Conclusion:
We tried to show and explain how to use Redux in React-Native. Redux may take some time to learn but with practice and time you will master your skills. For more information use can check the Redux documents here.
You can clone this project from *here *via github*.*
MTA Team:
Ali Gümüş Tosun - Semih Sevincli - Aslancan Yılmaz - Burak Arıcı
LinkedIn Accounts:
Ali Gümüş Tosun - Semih Sevinçli - Aslancan Yılmaz - Burak Arıcı
Top comments (0)