When implementing an app, it’s easy enough to manage some states if the app in question is simple to manage or is a single-pager, but when adding some layers, screens and generally more complex elements, the states can start to get out of hand.
Luckily, that’s where Redux comes in. Designed to manage application states, Redux is an open-source JavaScript library commonly used with either React or Angular. In this tutorial, you’ll be using Redux to help access or manipulate different components of your application.
As always, make sure to check out our previous hackajob React Native tutorials before beginning this one. You’ll be able to see what we’ve been working on so far, plus catch up on anything you might have missed.
To begin this tutorial, you’ll be using a sandbox app with the React Navigation already set:
Get the git clone here: https://github.com/BenHurMartins/sandbox-app.git
cd sandbox-app && npm install
If you’re using iOS, follow the steps below:
cd ios && pod install
cd ..
Note that this app has three screens. You’ll set the state from the first screen, show it on the second screen and delete the same state on the third screen.
To fully install Redux, you’ll need the following libraries:
Run the npm install bellow:
npm i --save redux react-redux redux-thunk
Now, create two folders. One will be for the ‘reducers’ (the state stores) and one for the ‘actions’ (the way to modify the states):
Inside the reducers folder, create two files. Name one ‘AppReducer.js’ so that you can call whatever you need - for example, ‘LoginReducer’, ‘UserReducer’ etc (essentially, it depends on the origin of the state). Name the other file ‘index.js’. You’ll use this one to export your reducers to the lifecycle:
AppReducer.js
You’ll have two states, as well as name and age options. You’ll be able to either set or erase the age/name with four actions. Remember that each action can dispatch its own type or more than one type:
Index.js
Here, you’ll export the reducers to the app lifecycle, with a function called ‘combineReducers’. Inside the actions folder, create the files ‘types.js’ and ‘AppActions.js’:
types.js
You’ll export your action types and will use ‘types.js’ to concentrate all action types:
AppActions.js
Here is where you’ll have your actions responsible to modify/update your state. We’ll be demonstrating how to use ‘async calls’ also. You’ll implement five actions: two of which will set the name and age, two to clean them and one that will be the ‘async call’ that will clean both name and age together after one second:
The last step? Setting the Redux on the highest component of the app. Simply open ‘App.js’ (found in the root folder of the project) and import the libraries below:
Set the Redux using the following functions:
Finally, use the ‘store’ inside the component provider that you imported earlier:
BEFORE PROVIDER
AFTER PROVIDER
The Redux is now ready to be used by each component of the app, you’ll just need to connect it with the component passing the state by props with the actions. Begin on ‘Screen01.js’:
Your app is now ready to launch:
A super simple example of how you can share states between components, this tutorial showcases how you can modify these states from another component with different actions. Of course, you’ll be able to find more complex state structures in a more comprehensive app, but with your new-found knowledge, you can be assured that you can handle at least 90% of real-world cases. Whilst Redux can seem really confusing to implement, it’ll feel like part of the family once you’ve used it a few times.
You can find the final code here.