React Native — Redux, the most simplest explanation

If your reading this article, then you want to know about Redux in React Native and already read few blogs and watched some youtube videos but still things are not clear for you !!

Don’t worry I was also in the same place some months back when I first tried understanding the Redux, definitely it is not a complicated topic, but difficult to grasp at one go. And examples on the internet are quite complex to understand for the beginner. So I will create a simplest example so that you will understand it very clearly.

First thing first the terminologies

  1. Action — An action that you want to perform, example login user, get posts from API etc. Basically it is just a variable generally created with const keyword. Ex: const INCREMENT_COUNTER = “INCREMENT_COUNTER”.
  2. Action Creator — An Arrow function that creates the action. This is required because sometimes actions cannot be just variable, some additional details might be associated with it.
  3. Reducer — Is a pure function which takes current state and action as input and returns the updated state. Most of the state management logic happens here.
  4. Store — In simple words is the container that contains the entire state of the Application.
  5. useSelector (Hook) — This hook is used to subscribe to the state changes which can be used later for either rendering or for some other process.
  6. useDispatch (Hook) — Used to dispatch the actions. You will be passing the action creator along with it, so that the required action can be performed. Ex: If you dispatch INCREMENT_COUNTER action, then the state variable having count value will be updated.

Now let’s get started, All the terminologies that I explained above will be used in the below example.

  1. Creating the project (I assume your using the react-native CLI, if your using expo, just refer expo documentation here, for the commands. )

2. Change directory to newly created project

2a. Install redux and react-redux, these 2 packages are required to use redux inside react.

3. Remove all the default contents from the App.js and retain the contents as shown below.

Now lets start with actual redux implementation.

4. Create a folder named store at the root directory.

5. Create a folder named actions, reducers inside it

6. In actions folder create a file named modifyCounter.js, and below are the contents of the action creator.

As explained above, here we have two actions, one is INCREASE_COUNTER and other is DECREASE_COUNTER and two action creators named incrementCounter, decrementCounter. In this case action creator is having just type property, but in your real time project you may have many properties which you may need to associate with the action. Depending on that add the properties.

Note: Having action creator is not compulsory !! just action is sufficient to perform the state management, but it is recommended to have action creator, as in future if any new property comes along with action, changes will be minimum.

7. Inside reducer folder create a file named modifyCounter.js and add below code.

In above modifyCounterReducer, a reducer function, we are taking current state and action as input and returning the new state as output. Here we are switching the action.type and incrementing or decrementing the count depending on that.

Observe the state change carefully here, we read the current state from the state variable and increment or decrement it and later return the updated value. Important thing to observe here is, the state itself is not modified, the variable initialState is the actual state of the application. We take it as an argument to function and modify the argument. Because of this states are immutable in redux. Also we can debug the redux state change using redux-devtools chrome extension, only because we are not modifying the actual state.

Now we are completed most important steps and left with creating store, and modifying the state of the Application.

8. Create a folder named screens/home.js at the root hierarchy. And below should be the content of it.

9. Now import the Home page in App.js and create the store and Provider, New App.js file would look like this.

10. Now let us access the store inside the Home component. Below is the updated content of Home.js

Follow the simple steps explained above and your react native application will get the capability of Redux. Once after you understand this example then step by step move states of different components to Redux store, create multiple action creators and reducers wherever necessary.

Other Articles by the same author

  1. How everything is Object in JavaScript ?
  2. How to use local Images dynamically in React Native
  3. Event Bubbling and Trickling/Capturing in JavaScript — Common interview question

Read more at mevasanth.medium.com

React Native developer with crazy JavaScript fan. Overall 5 years of Software Experience. Coffee lover, likes travelling and writing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store