Difference between Redux and Flux
Tags: reactnative, redux, flux
Published: 2020-03-29 17:35:25

<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="8bcc" 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="156f" class="graf graf--p graf-after--figure"  style="">In this post, we’ll try to compare&#8202;—&#8202;Flux and Redux. Both technologies <strong class="markup--strong markup--p-strong">allow you to manage state in your app. </strong>Both<strong class="markup--strong markup--p-strong"> </strong>are a great tool because they allow developers to quickly <strong class="markup--strong markup--p-strong">store</strong> and <strong class="markup--strong markup--p-strong">manage</strong> state in his app.</p><p name="bfce" class="graf graf--p graf-after--h3"  style=""><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"  style=""><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"  style=""><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"><em class="markup--em markup--blockquote-em">props</em></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"  style="">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"  style=""><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"  style=""><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"  style=""><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"  style=""><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"  style=""><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"  style=""><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><h3 name="7749" class="graf graf--h3 graf-after--figure"  style="">What is the&nbsp;Flux?</h3><p name="32cc" class="graf graf--p graf-after--h3"  style="">Flux is a Javascript architecture or pattern for UI which runs on unidirectional data flow and has a centralized dispatcher. It is useful when your project has dynamic data and you need to keep the data updated in an effective manner. It was created by Facebook and complements React as view. This model is used to ease maintenance. It has three primary components: Views, Stores, and Dispatcher. As the MVC application grows, we find many numbers of views as models, which are all talking to each other, making it difficult to manage and debug.</p><figure tabindex="0" contenteditable="false" name="2923" class="graf graf--figure graf-after--p"  style=""><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*ckGBd5Sn8jzaQOFrpD9-og.png" data-width="200" data-height="200" src="https://cdn-images-1.medium.com/max/800/1*ckGBd5Sn8jzaQOFrpD9-og.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Flux logo</figcaption></figure><p name="210b" class="graf graf--p graf-after--figure"  style="">Flux is more of a pattern than a framework and does not have any hard dependencies. However, we often use <a href="https://nodejs.org/api/events.html#events_class_events_eventemitter"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">EventEmitter</a> as a basis for <code class="markup--code markup--p-code">Stores</code> and <a href="https://github.com/facebook/react"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React</a> for our <code class="markup--code markup--p-code">Views</code>. The one-piece of Flux not readily available elsewhere is the <code class="markup--code markup--p-code">Dispatcher</code>. This module, along with some other utilities, is available here to complete your Flux toolbox.</p><p name="ebcf" class="graf graf--p graf-after--p"  style="">Flux can be broken down into few sections while building the application which is listed below.</p><p name="7cec" class="graf graf--p graf-after--p"  style=""><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="906c" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">dispatcher</strong>: The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each <em class="markup--em markup--p-em">store</em> registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.</p><p name="12c0" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Store: </strong>In Flux, Stores are simply a place where data is read out from. More specifically, Views within a Flux architecture will be notified of changes within Stores via the <a href="https://en.wikipedia.org/wiki/Observer_pattern"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Observer pattern</a>, and then query for those data in order to update their own states.</p><p name="973f" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">View</strong>&nbsp;: This<strong class="markup--strong markup--p-strong"> </strong>is where the UI of the application is kept.</p><figure tabindex="0" contenteditable="false" name="4509" class="graf graf--figure graf-after--p"  style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 349px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.9%;"></div><img class="graf-image" data-image-id="1*7qtRmuWoMmFyhpnyxoS3MA.png" data-width="2232" data-height="1114" src="https://cdn-images-1.medium.com/max/800/1*7qtRmuWoMmFyhpnyxoS3MA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Flux Work&nbsp;Flow</figcaption></figure><pre name="7d34" class="graf graf--pre graf-after--figure"  style=""><code class="markup--code markup--pre-code">const someAction = {<br>  type: "Test",<br>  payload: {user: "Test User", age: 25},<br>}</code></pre><p name="57d6" class="graf graf--p graf-after--pre"  style="">This is a generally accepted convention to have a type and a payload for an action. The payload can be any valid JS type (array, object, etc ).</p><h3 name="2fde" class="graf graf--h3 graf-after--p"  style="">Top 10 Attributes to Consider While Selecting the State Management tool for any&nbsp;website.</h3><p name="ecb2" class="graf graf--p graf-after--h3"  style="">To decide which one is better for State Management, lets first define the attributes based on which we will compare all of the above. And, these are:</p><ul class="postList"><li name="7fbd" class="graf graf--li graf-after--p"  style="">Developed By</li><li name="80be" class="graf graf--li graf-after--li"  style="">Stable Release</li><li name="956e" class="graf graf--li graf-after--li"  style="">Initial Release</li><li name="e737" class="graf graf--li graf-after--li"  style="">Github Stats</li><li name="917e" class="graf graf--li graf-after--li"  style="">Store</li><li name="6f6f" class="graf graf--li graf-after--li"  style="">Dispatcher</li><li name="b22a" class="graf graf--li graf-after--li"  style="">State</li><li name="4331" class="graf graf--li graf-after--li"  style="">Workflow</li><li name="d5f8" class="graf graf--li graf-after--li"  style="">Final Words (Pros and cons)</li></ul><h3 name="d096" class="graf graf--h3 graf-after--li"  style="">Developed By:-</h3><p name="6aa7" class="graf graf--p graf-after--h3"  style="">Redux was created by <strong class="markup--strong markup--p-strong">Dan Abramov</strong> and <strong class="markup--strong markup--p-strong">Andrew Clark</strong>. Abramov began writing the first Redux implementation while preparing for a conference talk at React Europe on hot reloading.</p><p name="5ecc" class="graf graf--p graf-after--p"  style="">Flux was created by <strong class="markup--strong markup--p-strong">Facebook</strong> For forcing an unidirectional flow of data between a system’s components.</p><h3 name="d608" class="graf graf--h3 graf-after--p"  style="">Initial Release:-</h3><p name="4cf2" class="graf graf--p graf-after--h3"  style="">Redux:- 2, June 2015<br>Flux:- June 2011</p><h3 name="a6e8" class="graf graf--h3 graf-after--p"  style="">Stable Release:-</h3><p name="d0c3" class="graf graf--p graf-after--h3"  style="">Redux:- 4.0.0 in April 2017</p><p name="5ff5" class="graf graf--p graf-after--p"  style="">The major changes in the stable release are around our TypeScript definitions, bundled CommonJS and ES builds, throwing if you subscribe or getState from a reducer, and a bunch of other smaller things. The full changes are listed below.</p><p name="da1a" class="graf graf--p graf-after--p"  style="">Flux:- 3.1.3 on Nov 2016</p><p name="4a64" class="graf graf--p graf-after--p"  style="">The major changes in the stable release are added support for React 16</p><h3 name="0461" class="graf graf--h3 graf-after--p"  style="">Github Stats:-</h3><h4 name="e911" class="graf graf--h4 graf-after--h3"  style="">Flux:-</h4><p name="1302" class="graf graf--p graf-after--h4"  style=""><strong class="markup--strong markup--p-strong">Github Stars</strong>:- 16331</p><p name="160b" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Contributors</strong>:- 114</p><p name="92a3" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Total commits</strong>:- 394</p><p name="48bf" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Total open issues</strong>:-10</p><p name="e937" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Total Closed Issues</strong>:-216</p><h4 name="91fc" class="graf graf--h4 graf-after--p"  style="">React:-</h4><p name="6692" class="graf graf--p graf-after--h4"  style=""><strong class="markup--strong markup--p-strong">Github Stars</strong>:- 50499</p><p name="745a" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Contributors</strong>:- 698</p><p name="5c54" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Total commits</strong>:- 2094</p><p name="ffbd" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Total open issues:-</strong>27</p><p name="f693" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Total Closed Issues</strong>:-1648</p><h3 name="6ed7" class="graf graf--h3 graf-after--p"  style="">Store:-</h3><p name="a7a2" class="graf graf--p graf-after--h3"  style="">With <strong class="markup--strong markup--p-strong">Flux</strong> it is a convention to have <strong class="markup--strong markup--p-strong">multiple stores</strong> per application; each store is a singleton object. In <strong class="markup--strong markup--p-strong">Redux</strong>, the convention is to have a <strong class="markup--strong markup--p-strong">single store </strong>per application, usually separated into data domains internally (you can create more than one Redux store if needed for more complex scenarios).</p><p name="c5d1" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Flux</strong>:- Multiple Store</p><p name="2d51" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Redux</strong>:- Single Store</p><h3 name="5d5b" class="graf graf--h3 graf-after--p"  style="">Dispatcher:-</h3><p name="1772" class="graf graf--p graf-after--h3"  style=""><strong class="markup--strong markup--p-strong">Flux</strong> has a <strong class="markup--strong markup--p-strong">single</strong> <strong class="markup--strong markup--p-strong">dispatcher</strong> and all actions have to pass through that dispatcher. It’s a singleton object. A Flux application cannot have multiple dispatchers. This is needed because a Flux application can have multiple stores and the dependencies between those stores need a single manager, which is the dispatcher.</p><p name="7079" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Redux</strong> has <strong class="markup--strong markup--p-strong">no dispatcher</strong> entity. Instead, the store has the dispatching process baked in. A Redux store exposes a few simple API functions, one of them is to dispatch actions.</p><h3 name="7175" class="graf graf--h3 graf-after--p"  style="">State:-</h3><p name="6952" class="graf graf--p graf-after--h3"  style="">The other bigger constraint is that the store’s state in <strong class="markup--strong markup--p-strong">Redux</strong> cannot be <strong class="markup--strong markup--p-strong">mutable</strong> (or really, shouldn’t be). There is no such constraint in Flux, you can mutate the state as you wish. The state’s immutability, in Redux, is achieved easily by making the reducers pure functions (with no side effects). Redux reducers always copy the state they receive and returns a modified version of the state’s copy, not the original object itself. While this is a big constraint, it makes life much easier long term.</p><p name="682b" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Redux</strong>:- Immutable</p><p name="9392" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Flux</strong>:- Mutable</p><h3 name="089a" class="graf graf--h3 graf-after--p"  style="">Workflow:-</h3><p name="f96b" class="graf graf--p graf-after--h3 is-selected"  style="">Having a similar state, action and unidirectional data flow, the Flux and Redux do have some workflow differences. Let’s understand the two technologies one-by-one.</p><h3 name="662b" class="graf graf--h3 graf-after--p"  style="">How Flux Functions</h3><p name="874c" class="graf graf--p graf-after--h3"  style="">Flux, in simple term, allows unidirectional data flow which is an essential part of keeping things predictable. You can understand this; you need to know how MVC architecture functions. The MVC architecture includes;</p><p name="0e13" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Action → Controller → Models →Views</em></strong></p><p name="f9ae" class="graf graf--p graf-after--p"  style="">In which Models and Views do not follow the bidirectional data flow which becomes extremely tough when complexity gets higher. There will be no clue to find exactly where the changes occur and that in result give rise to bugs.</p><figure tabindex="0" contenteditable="false" name="5fec" class="graf graf--figure graf-after--p is-defaultValue"  style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 393px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><img class="graf-image" data-image-id="0*ovem8pM12nyt2TPG" data-width="781" data-height="439" src="https://cdn-images-1.medium.com/max/800/0*ovem8pM12nyt2TPG"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="3461" class="graf graf--p graf-after--figure"  style="">While unidirectional data flow abided by Flux empowers applications to avoid the shimmering effect, and the process takes place something like the diagram below;</p><figure tabindex="0" contenteditable="false" name="8079" class="graf graf--figure graf-after--p is-defaultValue"  style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 381px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="0*vgDSI5TkgcLpT_0G" data-width="1300" data-height="708" src="https://cdn-images-1.medium.com/max/800/0*vgDSI5TkgcLpT_0G"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="edce" class="graf graf--p graf-after--figure"  style="">You may have got the precise idea of how Flux works.</p><h3 name="ce62" class="graf graf--h3 graf-after--p"  style="">How Redux Functions</h3><p name="adb4" class="graf graf--p graf-after--h3"  style="">As Redux is predictable state container for JavaScript apps, it has actions like Flux but here it’s a simple JavaScript object while using Redux, action will turn into functions and promises. It’s a small library and has been designed with a concept to be a predictable container for application state. Flux can be implemented along with a number of frameworks while Redux works to simplify and streamline the concept of (most of) Flux.</p><p name="1316" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong">Redux is built on the concept of;</strong></p><p name="4b10" class="graf graf--p graf-after--p"  style=""><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Actions → Store → Reducers → Subscriptions</em></strong></p><figure tabindex="0" contenteditable="false" name="2db2" class="graf graf--figure graf-after--p is-defaultValue"  style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 280px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.00000000000001%;"></div><img class="graf-image" data-image-id="0*mKI6NN7F3ziJoous" data-width="500" data-height="280" src="https://cdn-images-1.medium.com/max/800/0*mKI6NN7F3ziJoous"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4dc3" class="graf graf--p graf-after--figure"  style="">As you can see in some cases, Flux matches the Redux. The two technologies are also similar in terms of unidirectional data flow and aligning state implying ‘type’ field.</p><figure tabindex="0" contenteditable="false" name="3b35" class="graf graf--figure graf-after--p is-defaultValue"  style=""><div class="aspectRatioPlaceholder is-locked" style="max-width: 606px; max-height: 266px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 43.9%;"></div><img class="graf-image" data-image-id="1*6oj0eeyO1bHWX71Gq3gQog.png" data-width="606" data-height="266" src="https://cdn-images-1.medium.com/max/800/1*6oj0eeyO1bHWX71Gq3gQog.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="b04e" class="graf graf--h3 graf-after--figure"  style="">Final Words:-</h3><p name="39e8" class="graf graf--p graf-after--h3"  style="">Flux and Redux are a very integral part of the development and it is equally important for developers to know their usages. They are a small but powerful tool which makes your applications’ user interface attractive and usable.</p><p name="944a" class="graf graf--p graf-after--p"  style="">Some pros and cons of <strong class="markup--strong markup--p-strong">Redux</strong> and <strong class="markup--strong markup--p-strong">Flux</strong></p><h4 name="908f" class="graf graf--h4 graf-after--p"  style="">Redux</h4><ol class="postList"><li name="f045" class="graf graf--li graf-after--h4"  style="">Predictable State</li><li name="521a" class="graf graf--li graf-after--li"  style="">Work well with react</li><li name="7cf5" class="graf graf--li graf-after--li"  style="">Easy Debugging</li><li name="fc4f" class="graf graf--li graf-after--li"  style="">Log Everything</li><li name="a070" class="graf graf--li graf-after--li"  style="">Test without browser</li><li name="731d" class="graf graf--li graf-after--li"  style="">Hot reloading</li><li name="616e" class="graf graf--li graf-after--li"  style="">State stored in a single object</li></ol><h4 name="dc44" class="graf graf--h4 graf-after--li"  style="">Flux</h4><ol class="postList"><li name="1645" class="graf graf--li graf-after--h4"  style="">Unidirectional Data flow</li><li name="875e" class="graf graf--li graf-after--li"  style="">No MVCopen Source</li></ol><h3 name="4381" class="graf graf--h3 graf-after--li"  style="">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3"  style="">Now that you have learnt the major differences between Redux and flux for state management in your app, you can also try</p><ul class="postList"><li name="771c" class="graf graf--li graf-after--p"  style=""><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React Native life cycle hooks</a></li><li name="bf8d" class="graf graf--li graf-after--li"  style="">How To integrate in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image picker</a>| <a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Integrate Firebase</a></li><li name="8db9" class="graf graf--li graf-after--li"  style=""><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li><li name="ae6c" class="graf graf--li graf-after--li"  style=""><a href="https://enappd.com/blog/firebase-push-notifications-in-react-native/81/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push notifications in React Native Apps</a></li></ul><p name="2930" class="graf graf--p graf-after--li"  style="">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 graf-after--p is-defaultValue"  style=""><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="ce04" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>