{"id":1103,"date":"2019-06-17T11:34:26","date_gmt":"2019-06-17T11:34:26","guid":{"rendered":"http:\/\/www.inwizards.com\/blog\/?p=1103"},"modified":"2023-11-30T12:31:02","modified_gmt":"2023-11-30T12:31:02","slug":"5-simple-steps-to-add-redux-pattern-react-native","status":"publish","type":"post","link":"https:\/\/www.inwizards.com\/blog\/5-simple-steps-to-add-redux-pattern-react-native\/","title":{"rendered":"5 Simple Steps to add Redux Pattern React Native"},"content":{"rendered":"<p style=\"text-align: justify;\">As we know well that its the eon of technology where in between the gap of just a couple of days a new technology is launched and also inserting their hardcore efforts to become most popular and most inloved technology by the <strong>web app programmers<\/strong> and developers. Likewise, the react native tech stage is also walking on the same path and to entice the <strong>developers<\/strong>, these technology has introduced a redux for the proper management of a <strong>application<\/strong> state. While it is bit harder to easily understand the <strong>redux pattern<\/strong> of the <strong>react native<\/strong>.<\/p>\n<h2 style=\"text-align: justify;\"><strong>What is Redux?<\/strong><\/h2>\n<p style=\"text-align: justify;\">The <strong>react native redux<\/strong> is a JavaScript app container which works for the maintenance of the all states of the application in the easily available route. <strong>Redux<\/strong> is especially invented to enhance the reusability of core component of the react native library.<\/p>\n<p style=\"text-align: justify;\"><strong>List the amaze key features of redux:<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>It improves the consistent of the <strong>mobile application<\/strong>.<\/li>\n<li>It allows the developers to reuse of the code.<\/li>\n<li>Multi-directional flow of the data.<\/li>\n<li>Data stores at the top of the root library.<\/li>\n<li>Allows a single container running access to the application.<\/li>\n<\/ul>\n<p><strong>Need a <a href=\"https:\/\/www.inwizards.com\/reactjs-development-company.php\">top ReactJS development company<\/a>? Consult us now!<\/strong><\/p>\n<h3>Steps to add Redux Pattern React Native<\/h3>\n<p style=\"text-align: justify;\">Now lets start to setting up the <strong>redux in react native<\/strong> project, follow these procedure of simple 5 stages:<\/p>\n<ol>\n<li><strong>Install the setup in your project and then integrate it:<\/strong><\/li>\n<\/ol>\n<p>react-native init ReduxSample<br \/>\ncd ReduxSample<\/p>\n<p><strong>For its integration in a react native project:<\/strong><\/p>\n<p>yarn add redux react-redux<br \/>\n# or<br \/>\nnpm install redux react-redux \u2013save<\/p>\n<ol start=\"2\">\n<li><strong>Add the below mentioned code in the index.js file of your react native project:<\/strong><\/li>\n<\/ol>\n<p>import {AppRegistry} from \u2018react-native\u2019;<br \/>\nimport App from \u2018.\/App\u2019;<br \/>\nimport React from \u2018react\u2019;<br \/>\nimport { name as appName } from \u2018.\/app.json\u2019;<br \/>\nimport { Provider } from \u2018react-redux\u2019;<\/p>\n<p>import configureStore from \u2018.\/src\/store\u2019;<\/p>\n<p>const store = configureStore()<\/p>\n<p>const RNRedux = () =&gt; (<br \/>\n&lt;Provider store = { store }&gt;<br \/>\n&lt;App \/&gt;<br \/>\n&lt;\/Provider&gt;<br \/>\n)<\/p>\n<p>AppRegistry.registerComponent(appName, () =&gt; RNRedux);<\/p>\n<p>Design Pattern:<\/p>\n<p>Store<\/p>\n<p>This is the bunch of data which can be exerted by <strong>an application<\/strong> in all its structure and organization of the app data which can empower the logic sense of the reducer.<\/p>\n<p>import { createStore, combineReducers } from \u2018redux\u2019;<br \/>\nimport indicationReducer from \u2018.\/reducers\/IndicationReducer\u2019;<\/p>\n<p>const rootReducer = combineReducers({<br \/>\nindicator: indicationReducer<br \/>\n});<\/p>\n<p>const configureStore = () =&gt; {<br \/>\nreturn createStore(rootReducer);<br \/>\n}<\/p>\n<p>export default configureStore;<\/p>\n<ol start=\"3\">\n<li><strong>Actions<\/strong><\/li>\n<\/ol>\n<p>As in the form of a quick action, the redux sends the app data to the store from the app component. In actual, the redux action is a <strong>app development<\/strong> object whose root is to have a \u201cType property\u201d in the string value.<\/p>\n<p>Syntext:<\/p>\n<p>const action_name = \u201caction1\u201d;<\/p>\n<p>Project Example:<\/p>\n<p>export const SHOW_LOADER = \u2018SHOW_LOADER\u2019;<br \/>\nexport const HIDE_LOADER = \u2018HIDE_LOADER\u2019;<\/p>\n<p>You can keep action file separate from component for large applications and use action<br \/>\ncreator to create action and dispatch to store.<\/p>\n<p>import {action1} from \u2018.\/actionType\u2019;<\/p>\n<p>Action creator:<\/p>\n<p>Syntext:<br \/>\nfunction actionCreator(){<br \/>\nreturn {<br \/>\ntype:action_name,\/\/ must have<br \/>\npayload:[] \/\/optional property<br \/>\n}<br \/>\n}<\/p>\n<p>Project Example:<br \/>\nimport { SHOW_LOADER } from \u2018.\/ActionsConstants\u2019;<br \/>\nimport { HIDE_LOADER } from \u2018.\/ActionsConstants\u2019;<\/p>\n<p>export const showLoader = () =&gt; {<br \/>\nreturn {<br \/>\ntype: SHOW_LOADER,<br \/>\n}<br \/>\n}<br \/>\nexport const hideLoader = () =&gt; {<br \/>\nreturn {<br \/>\ntype: HIDE_LOADER,<br \/>\n}<br \/>\n}<\/p>\n<ol start=\"4\">\n<li><strong>Reducers<\/strong><\/li>\n<\/ol>\n<p>It is the event handler in the <strong>app component<\/strong> library of the react native app which specify the changes in the state of the actions in the <strong>app component<\/strong><\/p>\n<p>import { SHOW_LOADER } from \u2018..\/actions\/ActionsConstants\u2019;<br \/>\nimport { HIDE_LOADER } from \u2018..\/actions\/ActionsConstants\u2019;<\/p>\n<p>const initialState = {<br \/>\nisLoaderShowing:false<br \/>\n};<\/p>\n<p>const indicationReducer = (state = initialState, action) =&gt; {<br \/>\nswitch(action.type) {<br \/>\ncase SHOW_LOADER:<br \/>\nreturn{<br \/>\n\u2026state,<br \/>\nisLoaderShowing: true<br \/>\n};<br \/>\ncase HIDE_LOADER:<br \/>\nreturn{<br \/>\n\u2026state,<br \/>\nisLoaderShowing: false<br \/>\n};<br \/>\ndefault:<br \/>\nreturn state;<br \/>\n}<br \/>\n}<\/p>\n<p>export default indicationReducer;<\/p>\n<ol start=\"5\">\n<li><strong>Components<\/strong><\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Basically it is a class which is used to <strong>design and develop<\/strong> an <strong>app<\/strong> with interactive Uieither its a web or <strong>mobile application<\/strong>. These components have their own stats and properties. There are two kind of component props in the <strong>react native<\/strong> which are:<\/p>\n<p>mapStateToProps<\/p>\n<p>mapDispatchToProps<\/p>\n<p>They both work like an show and hide to the component, which a programer get as this.props.show()\u00a0and\u00a0this.props.hide() in the code file of your project.<\/p>\n<p>import React, { Component } from \u2018react\u2019;<br \/>\nimport { StyleSheet, View, ActivityIndicator, TouchableOpacity, Text } from \u2018react-native\u2019;<br \/>\nimport { connect } from \u2018react-redux\u2019;<br \/>\nimport { hideLoader, showLoader } from \u2018.\/src\/actions\/Indicator\u2019;<\/p>\n<p>class App extends Component {<\/p>\n<p>showHideLoader = () =&gt; {<br \/>\nif(!this.props.isLoaderShowing){<br \/>\nthis.props.show();<br \/>\n}<br \/>\nelse {<br \/>\nthis.props.hide();<br \/>\n}<br \/>\n}<\/p>\n<p>render() {<br \/>\nlet color = this.props.isLoaderShowing ? \u2018red\u2019:\u2019blue\u2019;<br \/>\nreturn (<br \/>\n&lt;View style={ styles.container }&gt;<br \/>\n&lt;View &gt;<br \/>\n&lt;View style={{flex:1, justifyContent:\u2019center\u2019, alignItems:\u2019center\u2019}}&gt;<br \/>\n&lt;View style={{paddingVertical:60}}&gt;<br \/>\n{ this.props.isLoaderShowing &amp;&amp; &lt;ActivityIndicator size={\u201clarge\u201d} color={\u2018red\u2019}\/&gt;}<br \/>\n&lt;\/View&gt;<br \/>\n&lt;TouchableOpacity onPress={this.showHideLoader.bind()}<br \/>\nstyle={{<br \/>\npaddingVertical:15,<br \/>\npaddingHorizontal:50,<br \/>\nborderColor:color,<br \/>\nborderWidth:1,<br \/>\nborderRadius:5,<br \/>\nbackgroundColor: color<br \/>\n}}<br \/>\n&gt;<br \/>\n&lt;Text style={{color:\u2019#fff\u2019, fontSize:17, fontWeight: \u2018bold\u2019}}&gt;{this.props.isLoaderShowing ? \u201cHide Loader\u201d : \u201cShow Loader\u201d}&lt;\/Text&gt;<br \/>\n&lt;\/TouchableOpacity&gt;<br \/>\n&lt;\/View&gt;<br \/>\n&lt;\/View&gt;<br \/>\n&lt;\/View&gt;<br \/>\n);<br \/>\n}<br \/>\n}<\/p>\n<p>const styles = StyleSheet.create({<br \/>\ncontainer: {<br \/>\npaddingTop: 30,<br \/>\njustifyContent: \u2018flex-start\u2019,<br \/>\nalignItems: \u2018center\u2019,<br \/>\n}<br \/>\n});<\/p>\n<p>const mapStateToProps = state =&gt; {<br \/>\nreturn {<br \/>\nisLoaderShowing:state.indicator.isLoaderShowing,<br \/>\n}<br \/>\n}<\/p>\n<p>const mapDispatchToProps = dispatch =&gt; {<br \/>\nreturn {<br \/>\nshow: () =&gt; {<br \/>\ndispatch(showLoader())<br \/>\n},<br \/>\nhide: () =&gt; {<br \/>\ndispatch(hideLoader())<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>export default connect(mapStateToProps, mapDispatchToProps)(App)<\/p>\n<p><strong>Looking for a top <a href=\"https:\/\/www.inwizards.com\/\">software Development Company<\/a>? Consult Inwizards.\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As we know well that its the eon of technology where in between the gap of just a couple of days a new technology is launched and also inserting their hardcore efforts to become most popular and most inloved technology<\/p>\n","protected":false},"author":1,"featured_media":1104,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"spay_email":""},"categories":[1],"tags":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.inwizards.com\/blog\/wp-content\/uploads\/2019\/06\/React-Native-with-Redux-min.jpg?fit=1200%2C680&ssl=1","_links":{"self":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/1103"}],"collection":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":6,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/1103\/revisions"}],"predecessor-version":[{"id":2644,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/posts\/1103\/revisions\/2644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media\/1104"}],"wp:attachment":[{"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/media?parent=1103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/categories?post=1103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inwizards.com\/blog\/wp-json\/wp\/v2\/tags?post=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}