How to implement Redux in React Native apps
Tags: reactnative, redux, state
Published: 2020-03-27 04:19:43

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="b4cf" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="7b24" class="graf graf--p graf-after--figure">This post will assist any developer to learn on how <a href="https://redux.js.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Redux</a> works with react native by creating a simple application with basic data flow.</p><blockquote name="ffa7" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/react-native-redux.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">React-native-redux-example</a></blockquote><h3 name="c922" class="graf graf--h3 graf-after--blockquote">What Is React&nbsp;Native?</h3><figure tabindex="0" contenteditable="false" name="d944" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 200px; max-height: 200px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*hVemiPgn143L4vIdAevNvw.jpeg" data-width="200" data-height="200" src="https://cdn-images-1.medium.com/max/800/1*hVemiPgn143L4vIdAevNvw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">React Native&nbsp;logo</figcaption></figure><p name="05ce" class="graf graf--p graf-after--figure is-selected">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="7fee" class="graf graf--p graf-after--p">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.</p><p name="9d66" class="graf graf--p graf-after--p">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this blog, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some example: <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, and <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.</p><h3 name="73d5" class="graf graf--h3 graf-after--p">What is&nbsp;Redux?</h3><p name="bfce" class="graf graf--p graf-after--h3"><a href="https://redux.js.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Redux</strong></a> is a standalone state management library, which can be used with any library or framework. If your background is <strong class="markup--strong markup--p-strong">React developer</strong>, then you have used the <strong class="markup--strong markup--p-strong">Redux library with React</strong>. The primary use of <strong class="markup--strong markup--p-strong">Redux</strong> is that we can use one application state as a global state and interact with the state from any react component is very easy whether they are siblings or parent-child.</p><figure tabindex="0" contenteditable="false" name="d2c9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 200px; max-height: 181px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 90.5%;"></div><img class="graf-image" data-image-id="1*kwMieaTmikxMDhZfI-yeaw.png" data-width="200" data-height="181" src="https://cdn-images-1.medium.com/max/800/1*kwMieaTmikxMDhZfI-yeaw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Redux Logo</figcaption></figure><blockquote name="ba58" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">Basic usage of Redux comes into picture when the app gets large and complex. In such apps, simple data management as parent-child becomes difficult using </strong><code class="markup--code markup--blockquote-code"><strong class="markup--strong markup--blockquote-strong">props</strong></code><strong class="markup--strong markup--blockquote-strong">. There are multiple components trying to communicate with multiple other components. In such cases, Redux comes in handy.</strong></blockquote><p name="ada6" class="graf graf--p graf-after--blockquote">Redux can be broken down into few sections while building the application which is listed below.</p><p name="c1ca" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Actions: “</strong>are payloads of information that send data from your application to your store. They are the <em class="markup--em markup--p-em">only</em> source of information for the store.” this means if any state change necessary the change required will be dispatched through the actions.</p><p name="77ce" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Reducers: “</strong>Actions<strong class="markup--strong markup--p-strong"> </strong>describe the fact that <em class="markup--em markup--p-em">something happened</em>, but don’t specify how the application’s state changes in response. This is the job of reducers.” when an action is dispatched for state change its the reducers duty to make the necessary changes to the state and return the new state of the application.</p><p name="090f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Store: </strong>with help of reducers a store can be created which holds the entire state of the application it is recommended to use a single store for the entire application than having multiple stores which will violate the use of redux which only has a single store.</p><p name="bb72" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Components (UI): </strong>This<strong class="markup--strong markup--p-strong"> </strong>is where the UI of the application is kept.</p><p name="854c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Middlewares</strong>: middleware can be used for a variety of things, including asynchronous API calls. Middleware sounds much more complicated than it really is. The only way to really understand middleware is to see how the existing middleware works and try to write your own.we will cover middleware in the next blog.</p><figure tabindex="0" contenteditable="false" name="5625" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 541px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*2--d_JqkSBPUBIe_TsppPA.jpeg" data-width="541" data-height="295" src="https://cdn-images-1.medium.com/max/800/1*2--d_JqkSBPUBIe_TsppPA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Redux workflow in simple schematic</figcaption></figure><p name="ea15" class="graf graf--p graf-after--figure">Without further explanation, let’s get into the coding aspects.</p><h3 name="32c4" class="graf graf--h3 graf-after--p">Steps for Implementing Redux in React Native&nbsp;app</h3><p name="0569" class="graf graf--p graf-after--h3">We will follow these step-by-step instructions to create our React Native with Redux</p><p name="5259" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1: Create a Basic React Native app</strong></p><p name="dce7" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2: Running app on device</strong></p><p name="e359" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">&zwnj;Step 3: Add simple counter into the App.js.</strong></p><p name="4a6a" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4: Install the necessary packages to connect your app with redux.</strong></p><p name="f9d3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 5: Create the necessary folders inside Root.</strong></p><p name="7e88" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 6: Create Actions and Reducer function.</strong></p><p name="7f21" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 7: Create a Redux Store.</strong></p><p name="4aa6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 8: Pass the Store to the React Native app.</strong></p><p name="0615" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 9: Connect React Native app to Redux store.</strong></p><p name="c35e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 10: Test your app</strong></p><p name="5302" class="graf graf--p graf-after--p">So let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="feb4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 320px; max-height: 240px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><img class="graf-image" data-image-id="1*HfUjPCVB8Eer3q22lcuoew.gif" data-width="320" data-height="240" src="https://cdn-images-1.medium.com/max/800/1*HfUjPCVB8Eer3q22lcuoew.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ouch! Let’s&nbsp;….. not&nbsp;dive</figcaption></figure><h3 name="7bdf" class="graf graf--h3 graf-after--figure">1. Create a basic React Native&nbsp;app</h3><p name="f682" class="graf graf--p graf-after--h3">First, make sure you have all pre-requisites to create a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a>.</p><blockquote name="cc11" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">At the time of this post, I have React-Native version 0.60</strong></blockquote><p name="2507" class="graf graf--p graf-after--blockquote">Create a blank react-native app (Replace <code class="markup--code markup--p-code">myApp</code> with your own name)</p><pre name="2cb3" class="graf graf--pre graf-after--p">$ react-native init myApp</pre><p name="c53e" class="graf graf--p graf-after--pre">This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)</p><h3 name="de1e" class="graf graf--h3 graf-after--p">Step 2: Running app on&nbsp;device</h3><p name="437c" class="graf graf--p graf-after--h3">To run the iOS app, you should specify simulator</p><pre name="a143" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">react-native run-ios --simulator=”iPhone X”</code></pre><p name="03c1" class="graf graf--p graf-after--pre">To run Android app, you should start emulator first, either via Android Studio or <code class="markup--code markup--p-code">adb</code>&nbsp;, then call</p><pre name="ced5" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">react-native run-android</code></pre><p name="ba77" class="graf graf--p graf-after--pre">You’ll see the default start screen</p><figure tabindex="0" contenteditable="false" name="c76c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*TnZfGsKdsWGBUac-0YutpA.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*TnZfGsKdsWGBUac-0YutpA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Default start screen for React Native&nbsp;app</figcaption></figure><h3 name="46c8" class="graf graf--h3 graf-after--figure">&zwnj;Step 3: Add simple counter into the&nbsp;App.js.</h3><p name="f1b8" class="graf graf--p graf-after--h3">Now we’ll change<code class="markup--code markup--p-code">App.js</code> to contain the UI required to render on the application with all the styling’s as shown below. The UI will contain two button’s and a text to show the count. All the class actions will be accessed using the <code class="markup--code markup--p-code">this</code> variable and all the state variable will be accessed using <code class="markup--code markup--p-code">this.state</code> which contain the current state of the app. Within the button <code class="markup--code markup--p-code">onPress</code> field, the actions will be called which are defined on the class in <code class="markup--code markup--p-code">App.js</code>.</p><p name="09a6" class="graf graf--p graf-after--p">So after adding this counter your <code class="markup--code markup--p-code">App.js</code> looks something like this.</p><figure tabindex="0" contenteditable="false" name="07a8" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/f63d5afb800470bde213b074c3a2b3cd.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="1c6e" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*C5riZSuBtgeRRAs5T71hVA.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*C5riZSuBtgeRRAs5T71hVA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="629f" class="graf graf--h3 graf-after--figure"><strong class="markup--strong markup--h3-strong">Step 4: Install the necessary packages to connect your app with&nbsp;redux</strong></h3><p name="2795" class="graf graf--p graf-after--h3">In order to get redux to work with react-native few packages need to be installed as shown below</p><p name="78b6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">npm</strong></p><pre name="af6e" class="graf graf--pre graf-after--p">npm install react-redux<br>npm install redux</pre><p name="31f3" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">yarn</strong></p><pre name="12d9" class="graf graf--pre graf-after--p">yarn add react-redux<br>yarn add redux</pre><blockquote name="46c5" class="graf graf--blockquote graf-after--pre"><a href="https://github.com/reduxjs/react-redux"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">React Redux</a> is the official <a href="https://reactjs.org/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">React</a> binding for <a href="https://redux.js.org/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Redux</a>. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.</blockquote><blockquote name="df5b" class="graf graf--blockquote graf-after--blockquote">As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run <code class="markup--code markup--blockquote-code">npm ls react</code> and make sure you don’t have a duplicate React installation in your <code class="markup--code markup--blockquote-code">node_modules</code>. We recommend that you use <code class="markup--code markup--blockquote-code">npm@3.x</code>which is better at avoiding these kinds of issues.</blockquote><p name="67e3" class="graf graf--p graf-after--blockquote">The React Redux docs are now published at <a href="https://react-redux.js.org/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener"    target="_blank">https://react-redux.js.org</a>&nbsp;.</p><p name="9f0c" class="graf graf--p graf-after--p">If you want to know how it works, check out <a href="https://www.youtube.com/watch?v=VJ38wSFbM3A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this link</a></p><h3 name="7a4f" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Step 5: Create the necessary folders inside&nbsp;Root</strong></h3><p name="041e" class="graf graf--p graf-after--h3">Let’s keep this image in mind to help us understand which parts of Redux are implemented at what step.</p><figure tabindex="0" contenteditable="false" name="2f85" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 541px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*Q3QdBDZL4cBrR5GXT6J5jA.jpeg" data-width="541" data-height="295" src="https://cdn-images-1.medium.com/max/800/1*Q3QdBDZL4cBrR5GXT6J5jA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="5695" class="graf graf--p graf-after--figure">To work with redux you can follow this folder structure for better code quality</p><p name="caaa" class="graf graf--p graf-after--p">Create the following folders.</p><ol class="postList"><li name="98ae" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">actions</strong></li><li name="56f5" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">constants</strong></li><li name="f2ee" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">reducers</strong></li><li name="cc5e" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">components</strong></li></ol><h3 name="3662" class="graf graf--h3 graf-after--li"><strong class="markup--strong markup--h3-strong">Step 6: Create Constants, Actions, and Reducer&nbsp;function</strong></h3><p name="11be" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">6.1</strong> Inside the <code class="markup--code markup--p-code">constants</code> folder, create one file called <strong class="markup--strong markup--p-strong">index.js. </strong>Add the following line inside <strong class="markup--strong markup--p-strong">index.js.</strong></p><pre name="8552" class="graf graf--pre graf-after--p">export const COUNTER_CHANGE = 'COUNTER_CHANGE'</pre><p name="9caf" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">6.2</strong> Inside the <strong class="markup--strong markup--p-strong">actions </strong>folder, create one file called <strong class="markup--strong markup--p-strong">counts.js. </strong>Add the following code inside <strong class="markup--strong markup--p-strong">counts.js.</strong></p><p name="3f0f" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">Actions</code> are JavaScript objects that represent payloads of information that send data from your application to your <code class="markup--code markup--p-code">Redux</code> store.</p><p name="dbfc" class="graf graf--p graf-after--p">Actions have a type and an optional payload. In our case, the type will be <code class="markup--code markup--p-code">COUNTER_CHANGE</code>, and the payload <code class="markup--code markup--p-code">count</code> which we are assigning into our <code class="markup--code markup--p-code">count</code> variable in store.</p><pre name="30e2" class="graf graf--pre graf-after--p">import { COUNTER_CHANGE } from '../constants';<br>export function changeCount(count) {<br>  return {<br>    type: COUNTER_CHANGE,<br>    payload: count<br>  }<br>}</pre><p name="67ad" class="graf graf--p graf-after--pre">The <strong class="markup--strong markup--p-strong">changeCount() </strong>function returns an action. Now based on that action, reducers function’s case is executed.</p><p name="5c8b" class="graf graf--p graf-after--p">But, we need to connect this action to our <code class="markup--code markup--p-code">App.js</code> component somehow. Otherwise, we cannot add the data into the Redux store. Also, we need to first create a store. But before that, we also need to create a reducer function. So, first, create a reducer → then create a store and → then connect the React Native application to the <strong class="markup--strong markup--p-strong">Redux</strong> store.</p><figure tabindex="0" contenteditable="false" name="3c4e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 541px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*Au_jHh1Ytm-WazqHqB1J-g.jpeg" data-width="541" data-height="295" src="https://cdn-images-1.medium.com/max/800/1*Au_jHh1Ytm-WazqHqB1J-g.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Actions created&nbsp;…</figcaption></figure><p name="1654" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">6.3</strong> Inside <strong class="markup--strong markup--p-strong">reducers </strong>function, create one file called <strong class="markup--strong markup--p-strong">countReducer.js. </strong>Add the following code inside it.</p><p name="9b81" class="graf graf--p graf-after--p">A <code class="markup--code markup--p-code">reducer</code> is a pure function that takes the previous <code class="markup--code markup--p-code">state</code> and an <code class="markup--code markup--p-code">action</code> as arguments and returns a new state. The reducer is instrumental in keeping the current <code class="markup--code markup--p-code">state</code> of <code class="markup--code markup--p-code">count</code> updated throughout our app as it changes.</p><pre name="15af" class="graf graf--pre graf-after--p">import { COUNTER_CHANGE } from '../constants';<br>const initialState = {<br>  count: 0<br>};<br>const countReducer = (state = initialState, action) =&gt; {<br>  switch(action.type) {<br>    case COUNTER_CHANGE:<br>      return {<br>        ...state,<br>        count:action.payload<br>      };<br>    default:<br>      return state;<br>  }<br>}<br>export default countReducer;</pre><p name="bebb" class="graf graf--p graf-after--pre">So, here, we have defined the function called <strong class="markup--strong markup--p-strong">countReducer</strong> that accepts the two arguments.</p><ol class="postList"><li name="fbbd" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">state</strong></li><li name="c952" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">action</strong></li></ol><p name="97e5" class="graf graf--p graf-after--li">The first time, it will take the <strong class="markup--strong markup--p-strong">initial state</strong> of our application, and then we pass whatever argument, it takes that argument and operates based on the case execution. The second argument is <strong class="markup--strong markup--p-strong">action, </strong>which consists of <strong class="markup--strong markup--p-strong">type </strong>and <strong class="markup--strong markup--p-strong">payload. </strong>The <strong class="markup--strong markup--p-strong">payload</strong> is the count value, which assigned to count variable in store.</p><p name="87e6" class="graf graf--p graf-after--p">Remember here&#8202;—&#8202;we have returned a new state and not existing state. So we have modified the state in pure manner.</p><figure tabindex="0" contenteditable="false" name="2155" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 541px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*Lm-NV5s_pxehZXR58XOM9w.jpeg" data-width="541" data-height="295" src="https://cdn-images-1.medium.com/max/800/1*Lm-NV5s_pxehZXR58XOM9w.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Actions and reducer&nbsp;created</figcaption></figure><h3 name="a34c" class="graf graf--h3 graf-after--figure">Step 7:-Create a Redux&nbsp;Store.</h3><p name="f2dd" class="graf graf--p graf-after--h3">Inside the root folder, create one folder called <strong class="markup--strong markup--p-strong">store </strong>and inside this folder add one file called <code class="markup--code markup--p-code">configureStore.js</code> add the following code.</p><pre name="058a" class="graf graf--pre graf-after--p">import { createStore, combineReducers } from 'redux';<br>import countReducer from '../reducers/countReducer';<br>const rootReducer = combineReducers(<br>{ count: countReducer }<br>);<br>const configureStore = () =&gt; {<br>return createStore(rootReducer);<br>}<br>export default configureStore;</pre><p name="0dd1" class="graf graf--p graf-after--pre">Here, we have created the redux store and passed the reducer to that store. This store will ideally contain all the data that handles the app state.</p><p name="1ec6" class="graf graf--p graf-after--p">The <strong class="markup--strong markup--p-strong">combineReducer </strong>function combines all the different reducers into one and forms the global state. So this is the global state of our whole application.</p><figure tabindex="0" contenteditable="false" name="47b9" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 541px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*5T_3GIKODoO03mrqakOULw.jpeg" data-width="541" data-height="295" src="https://cdn-images-1.medium.com/max/800/1*5T_3GIKODoO03mrqakOULw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="f3f5" class="graf graf--h3 graf-after--figure">Step 8: Pass the Store to the React Native&nbsp;app.</h3><p name="6bb9" class="graf graf--p graf-after--h3">Inside the root folder, you will find one file called <strong class="markup--strong markup--p-strong">index.js </strong>and inside that file add the following code.</p><figure tabindex="0" contenteditable="false" name="e80f" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/f1540f1b7084593ae0abfc8f87a03f91.js %}</div></div></figure><p name="c762" class="graf graf--p graf-after--figure">It is almost the same as React web application, in which we pass the Provider as a root element and pass the store and then via react-redux’s <strong class="markup--strong markup--p-strong">connect</strong>() function, we can <strong class="markup--strong markup--p-strong">connect</strong> the any react component to <strong class="markup--strong markup--p-strong">redux</strong> store.</p><figure tabindex="0" contenteditable="false" name="aec6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 541px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*6kh_Lwo9EKVfsaZKtw3oTw.jpeg" data-width="541" data-height="295" src="https://cdn-images-1.medium.com/max/800/1*6kh_Lwo9EKVfsaZKtw3oTw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Store connected to the&nbsp;app</figcaption></figure><h3 name="91b3" class="graf graf--h3 graf-after--figure">Step 9: Connect React Native app to Redux&nbsp;store.</h3><p name="d12f" class="graf graf--p graf-after--h3">Finally, we connect our <strong class="markup--strong markup--p-strong">App.js </strong>component to the <strong class="markup--strong markup--p-strong">Redux</strong> store. For that, we need the <strong class="markup--strong markup--p-strong">connect() </strong>function from the<strong class="markup--strong markup--p-strong"> react-redux</strong> library.</p><figure tabindex="0" contenteditable="false" name="23a8" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/251ab2e5638422c035d09d23b99d2e93.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="9d17" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 541px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*s7Zns1QN9G_w0O_rwNCNAA.jpeg" data-width="541" data-height="295" src="https://cdn-images-1.medium.com/max/800/1*s7Zns1QN9G_w0O_rwNCNAA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">And finally, store is now connected to UI via&nbsp;State</figcaption></figure><p name="bf8b" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Connect</strong> which needs to be imported from <em class="markup--em markup--p-em">react-redux </em>and with the help of connect the properties will be mapped to the UI component.</p><p name="976b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">mapStateToProps </strong>will contain all the state properties which will be available to the components of the app whatever properties that need to be accessed from the UI components need to be written into the <strong class="markup--strong markup--p-strong">mapStateToProps </strong>helper function.</p><p name="f00f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">mapDispatchToProps </strong>will contain all the necessary functions wrapped with action creators which will be mapped to the props of the app and can be called directly. The directory containing the below file is<code class="markup--code markup--p-code">&nbsp;./actions/counts.js</code></p><p name="eef5" class="graf graf--p graf-after--p">Here, when we click on the increment or decrement button, we get the count value from props and change it and then send it to the action with that value. Now that action returned the object with the action type and payload and based on the type the reducer will be executed and add that values inside the store.</p><p name="465a" class="graf graf--p graf-after--p">Now, if the store’s values are changed, then we need to update the UI based on the new values. That is why <strong class="markup--strong markup--p-strong">the mapStateToProps </strong>function is created. So, when the store’s count get the new value, render function executed again and update the UI.</p><h3 name="3117" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Step 10: Test your&nbsp;app:</strong></h3><p name="8b15" class="graf graf--p graf-after--h3">Once you run the application the below UI will be rendered.</p><figure tabindex="0" contenteditable="false" name="2251" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*C5riZSuBtgeRRAs5T71hVA.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*C5riZSuBtgeRRAs5T71hVA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic Redux&nbsp;Example</figcaption></figure><p name="dd85" class="graf graf--p graf-after--figure">Once you click on any of the buttons it will correctly increment and decrement the count. Although, what we just did is nothing fancy for an app, remember everything is going through the whole <strong class="markup--strong markup--p-strong">“action-reducer-store-state”</strong> flow. This flow can handle large and complex apps, so you don’t get stuck in<strong class="markup--strong markup--p-strong"> “props” </strong>loops.</p><p name="2a36" class="graf graf--p graf-after--p">(If you are from an <strong class="markup--strong markup--p-strong">Angular</strong> background, for ease of understanding, you can understand <code class="markup--code markup--p-code">actions</code> as something similar to methods in <code class="markup--code markup--p-code">services</code> which we can call from any component or page. <code class="markup--code markup--p-code">Reducers</code> are also similar functions, but they change the central store of the app. <code class="markup--code markup--p-code">Store</code> can be assumed as something similar to a <code class="markup--code markup--p-code">$rootscope </code>object which stores all the data at one place, and can be accessed from any page. Don’t draw a direct comparison between these things, this is just to help you understand the concept in an easier way.)</p><p name="21b3" class="graf graf--p graf-after--p">Hope this blog helps you to implement redux with react native apps.</p><h3 name="4d35" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="adcf" class="graf graf--p graf-after--h3">In this post, you learned how to implement Redux in your React Native app. You learnt what are reducers, actions and store, how the flow of data is managed in a Redux based app.</p><figure tabindex="0" contenteditable="false" name="c10f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 348px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 72.5%;"></div><img class="graf-image" data-image-id="1*ceLX14cSsAZ-M7c2GHdlSA.gif" data-width="480" data-height="348" src="https://cdn-images-1.medium.com/max/800/1*ceLX14cSsAZ-M7c2GHdlSA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Now, chill</figcaption></figure><p name="8331" class="graf graf--p graf-after--figure">Stay tuned for more Ionic and React Native blogs&nbsp;!</p><p name="7a72" class="graf graf--p graf-after--p">Happy Coding.🤓👍🏼</p><blockquote name="e406" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/react-native-redux.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">React-native-redux-example</a></blockquote><p name="2747" class="graf graf--p graf-after--blockquote">The next post will be on how to implement async actions with the help of middlewares.</p><h3 name="0fac" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about setting up Redux in React Native apps, here are some other topics you can look into</p><ul class="postList"><li name="6f8d" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/firebase-analytics-in-react-native-app/101"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Analytics</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode &amp; QR code scan</a> | <a href="https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send &amp; Read SMS</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a> | <a href="https://enappd.com/blog/anonymous-login-in-react-native-apps-with-firebase/129"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous Login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="8db9" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="28d0" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="3da7" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>