<h3><strong><span style="color: #000080;">Redux</span></strong></h3>
<p>Redux is all about having some central store that managing our entire application state or where we store our entire application state.</p>
<p>Get <strong>GITHUB</strong> code from <a href="https://github.com/arunk7839/ReactReduxExample"><span style="color: #00ff00;"><strong>HERE</strong></span></a>.</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="kBRtJPFpryk" title="ReactNative Working With Redux"><a placeholder href="https://youtu.be/kBRtJPFpryk"><img src="https://i.ytimg.com/vi/kBRtJPFpryk/hqdefault.jpg" layout="fill" object-fit="cover" alt="ReactNative Working With Redux"></a></amp-youtube></p>
<h3 id="gettingstarted"><strong><span style="color: #000080;">Getting Started</span></strong></h3>
<ul>
<li>You will have to install and configure React Native. If you don&#8217;t know how then you can visit to my this <span style="color: #00ccff;"><strong><a style="color: #00ccff;" href="https://c1ctech.com/installing-react-native-on-windows/">tutorial</a></strong></span> .</li>
</ul>
<ul>
<li>Create a new react native application <strong><span style="color: #0000ff;">ReactReduxExample</span></strong> .Use this command:</li>
</ul>
<pre style="padding-left: 30px;"><span style="color: #008000;"> react-native init <strong>ReactReduxExample

</strong></span></pre>
<h3 id="integratingredux"><strong><span style="color: #000080;">Integrating Redux</span></strong></h3>
<p>To integrate redux in our application we have to install redux and react-redux in our root folder.</p>
<pre><strong><span style="color: #0000ff;">cd ReactReduxExample</span></strong>

<strong><span style="color: #008000;">npm install - - save redux</span></strong>

<strong><span style="color: #008000;">npm install - - save react-redux</span></strong></pre>
<p><strong><span style="color: #0000ff;">or</span></strong></p>
<pre><strong><span style="color: #008000;">npm install - - save redux react-redux</span></strong></pre>
<h3></h3>
<h3 id="design"><strong><span style="color: #000080;">Design</span></strong></h3>
<p><img class="aligncenter wp-image-600 size-full" src="https://c1ctech.com/wp-content/uploads/2018/07/react-redux-1.png" alt="" width="1286" height="794" /></p>
<p>We will cover 5 basic <strong><span style="color: #993366;">React/Redux</span></strong> concepts. In three sections:</p>
<ul>
<li>Actions</li>
<li>Stores/Reducers</li>
<li>Containers and Components</li>
</ul>
<h4><strong><span style="color: #008000;">Actions</span></strong></h4>
<p><span style="color: #993366;" data-offset-key="bf6384f834b84aa98d79db1477a67825:0"><strong class="_u5j6yl">Actions</strong></span><span data-offset-key="bf6384f834b84aa98d79db1477a67825:1"> are payloads of information that send data from your application to your store. </span></p>
<p><span data-offset-key="37331f0329274a39a33bf732d0dbf32c:0">Actions are plain JavaScript objects. Actions must have a </span><strong><span style="color: #993366;" data-offset-key="37331f0329274a39a33bf732d0dbf32c:1">type</span></strong><span data-offset-key="37331f0329274a39a33bf732d0dbf32c:2"> property that indicates the type of action being performed.</span></p>
<p><strong><span style="color: #0000ff;">ActionTypes.js</span></strong></p>
<pre><code>export const ADD_PLACE = 'ADD_PLACE';
export const DELETE_PLACE = 'DELETE_PLACE';
export const SELECT_PLACE = 'SELECT_PLACE';
export const DESELECT_PLACE = 'DESELECT_PLACE';</code></pre>
<p><strong><span style="color: #0000ff;">Actions</span></strong></p>
<pre><code>{
 type: ADD_PLACE,
 placeName: placeName
}</code></pre>
<pre><code>{
 type: DELETE_PLACE
}</code></pre>
<pre><code>{
 type: SELECT_PLACE,
 placeKey: key
}</code></pre>
<pre><code>{
 type: DESELECT_PLACE
}</code></pre>
<h5 class="_bc4egv"><span style="color: #0000ff;"><strong><span class="_7dnwj3f">Action Creators</span></strong></span></h5>
<p class="_v011fo" data-key="d5779fee8b834dceb4ca7184bf2f2699"><span class="_2he8v2h"><span data-key="ff2d9389b0594f2c805bd4ac88eead12"><span style="color: #800080;"><strong class="_u5j6yl">Action creators</strong></span> are exactly that—functions that create actions or return actions.</span></span></p>
<p data-key="d5779fee8b834dceb4ca7184bf2f2699"><strong><span style="color: #0000ff;">ActionCreator (places.js)</span></strong></p>
<pre><code>import { ADD_PLACE, DELETE_PLACE, SELECT_PLACE, DESELECT_PLACE } from './actionTypes';
export const addPlace = (placeName) =>; {
 return {
 type: ADD_PLACE,
 placeName: placeName
 };
};

export const deletePlace = () =>; {
 return {
 type: DELETE_PLACE
 };
};

export const selectPlace = (key) =>; {
 return {
 type: SELECT_PLACE,
 placeKey: key
 };
};

export const deselectPlace = () =>; {
 return {
 type: DESELECT_PLACE
 };
};</code></pre>
<h4><strong><span style="color: #008000;">Reducers</span></strong></h4>
<p>Reducers receive the dispatched actions from the component and corresponding to that action it updates the application state in a pure synchronous function.</p>
<p class="_v011fo" data-key="a6980cf4c8a049f389da1fe85896991d"><span class="_2he8v2h"><span data-key="2b8fb8cc6f974c78926bea5e4168bffb">The reducer is a pure function that takes the previous state and an action, and returns the new state.</span></span></p>
<div class="_1y81j11">
<div data-key="fe071e39eac84a31a89eda7123d8f5e5">
<pre class="_17r7t1h" data-key="fe22a8bed6124ae89efd172056a133d3"><strong><span style="color: #0000ff;" data-key="785d857d9daf4ce9b92400292ad8838c"><span class="prism-token token punctuation ">(</span><span class="prism-token token 1">previousState</span><span class="prism-token token 2 punctuation ">,</span><span class="prism-token token 3"> action</span><span class="prism-token token 4 punctuation ">)</span> <span class="prism-token token 6 operator ">=>;</span><span class="prism-token token 7"> newState</span></span></strong></pre>
</div>
</div>
<div data-key="fe22a8bed6124ae89efd172056a133d3">When there are multiple actions we use switch to identify the corresponding action by its unique type that indicates the type of action being performed.</div>
<p><strong><span style="color: #0000ff;">Reducer(Places.js)</span></strong></p>
<pre><code>import {
 ADD_PLACE,
 DELETE_PLACE,
 SELECT_PLACE,
 DESELECT_PLACE
} from "../actions/actionTypes";

const initialState = {
 places: [],
 selectedPlace: null
};

const reducer = (state = initialState, action) =>; {
 switch (action.type) {
 case ADD_PLACE:
 return {
 ...state,
 places: state.places.concat({
 key: Math.random(),
 name: action.placeName,
 image: {
 uri:
 "https://c1.staticflickr.com/5/4096/4744241983_34023bf303_b.jpg"
 }
 })
 };
 case DELETE_PLACE:
 return {
 ...state,
 places: state.places.filter(place =>; {
 return place.key !== state.selectedPlace.key;
 }),
 selectedPlace: null
 };
 case SELECT_PLACE:
 return {
 ...state,
 selectedPlace: state.places.find(place =>; {
 return place.key === action.placeKey;
 })
 };
 case DESELECT_PLACE:
 return {
 ...state,
 selectedPlace: null
 };
 default:
 return state;
 }
};

export default reducer;</code></pre>
<h4 data-key="d5779fee8b834dceb4ca7184bf2f2699"><span class="_2he8v2h" style="color: #008000;"><strong class="_u5j6yl">Store</strong></span></h4>
<p class="_v011fo" data-key="0d125100079c4e03957c5de362f27ec4"><span class="_2he8v2h"><span data-key="7125999dfe8c4f89a7ac1ab1e747d818">The <span style="color: #800080;"><strong class="_u5j6yl">Store</strong></span> is the object that holds our entire application state, Allows access to state via <strong><span style="color: #800080;">getState</span></strong>() , Allows state to be updated via <strong><span style="color: #800080;">dispatch(action)</span></strong> etc.</span></span></p>
<p data-key="0d125100079c4e03957c5de362f27ec4"><strong><span style="color: #0000ff;">configureStore.js</span></strong></p>
<pre><code>import { createStore, combineReducers } from 'redux';

import placesReducer from './reducers/places';

const rootReducer = combineReducers({
 places: placesReducer
});

const configureStore = () =>; {
 return createStore(rootReducer);
};

export default configureStore;</code></pre>
<p><span style="color: #008000;"><span style="color: #000000;">We can have more than one reducers in our application ,we used <strong><span style="color: #800080;">combineReducers()</span></strong> to combine several reducers into one. combineReducers() returns a reducer(<strong><span style="color: #800080;">function</span></strong>) that invokes every reducer inside the reducers object.<br />
Here we called it as rootReducer.Now we will pass it to <strong><span style="color: #800080;">createStore().</span></strong></span></span></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.94.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p><strong><span style="color: #800080;">createStore</span></strong>() returns an object(<strong><span style="color: #800080;">Store</span></strong>) that holds the complete state of your app.</p>
<h5><span style="color: #0000ff;"><strong> Passing the Store</strong></span></h5>
<p><span style="color: #800080;"><;<strong>Provider</strong>>; </span>magically make the store available to all container components in the application without passing it explicitly as a prop to every container component. You only need to use it once when you render the root component:</p>
<p><strong><span style="color: #0000ff;">index.js<br />
</span></strong></p>
<pre><code>import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import App from './App';
import configureStore from './src/store/configureStore';

const store = configureStore();

const RNRedux = () =>; (
 <;Provider store={store}>;
 <;App />;
 <;/Provider>;
);

AppRegistry.registerComponent('ReactReduxExample', () =>; RNRedux);</code></pre>
<h4><strong><span style="color: #008000;">Components</span></strong></h4>
<p>Components are responsible for rendering data to the screen.</p>
<h4><span style="color: #008000;"><strong>Containers</strong></span></h4>
<p>Container components are components that are connected with redux. They are responsible for retrieving data, and in order to get that data, the component needs to use Redux&#8217;s <strong><span style="color: #800080;">connect</span></strong> and <span style="color: #800080;"><strong>mapStateToProps</strong></span> functions.</p>
<p><strong><span style="color: #0000ff;">App.js</span></strong></p>
<pre><code>import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { connect } from "react-redux";

import PlaceInput from "./src/components/PlaceInput/PlaceInput";
import PlaceList from "./src/components/PlaceList/PlaceList";
import PlaceDetail from "./src/components/PlaceDetail/PlaceDetail";
import {
 addPlace,
 deletePlace,
 selectPlace,
 deselectPlace
} from "./src/store/actions/index";

class App extends Component {
 placeAddedHandler = placeName =>; {
 this.props.onAddPlace(placeName);
 };

 placeDeletedHandler = () =>; {
 this.props.onDeletePlace();
 };

 modalClosedHandler = () =>; {
 this.props.onDeselectPlace();
 };

 placeSelectedHandler = key =>; {
 this.props.onSelectPlace(key);
 };

 render() {
 return (
 <;View style={styles.container}>;
 <;PlaceDetail
 selectedPlace={this.props.selectedPlace}
 onItemDeleted={this.placeDeletedHandler}
 onModalClosed={this.modalClosedHandler}
 />;
 <;PlaceInput onPlaceAdded={this.placeAddedHandler} />;
 <;PlaceList
 places={this.props.places}
 onItemSelected={this.placeSelectedHandler}
 />;
 <;/View>;
 );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 padding: 26,
 backgroundColor: "#fff",
 alignItems: "center",
 justifyContent: "flex-start"
 }
});

const mapStateToProps = state =>; {
 return {
 places: state.places.places,
 selectedPlace: state.places.selectedPlace
 };
};

const mapDispatchToProps = dispatch =>; {
 return {
 onAddPlace: name =>; dispatch(addPlace(name)),
 onDeletePlace: () =>; dispatch(deletePlace()),
 onSelectPlace: key =>; dispatch(selectPlace(key)),
 onDeselectPlace: () =>; dispatch(deselectPlace())
 };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);</code></pre>
<h3 id="applayout"><strong><span style="color: #000080;">App Layout</span></strong></h3>
<p>We&#8217;ll add all our app related code in a new folder called &#8216;<strong><span style="color: #008000;">src</span></strong>&#8216; in the root of our newly created project. Create these folders and files I have created inside <strong><span style="color: #008000;">src</span></strong> directory as shown below with respective code :</p>
<p><span style="color: #008000;"><strong><span data-key="6b2a1c6e33d5451dab1ead7f65a05809"><img class="alignnone size-medium wp-image-602" src="https://c1ctech.com/wp-content/uploads/2018/07/redux-capture-227x300.png" alt="" width="227" height="300" /></span></strong></span></p>
<p><span style="color: #0000ff;"><strong>ListItem.js</strong></span></p>
<pre><code>import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";

const listItem = props =>; (
 <;TouchableOpacity onPress={props.onItemPressed}>;
 <;View style={styles.listItem}>;
 <;Image resizeMode="cover" source={props.placeImage} style={styles.placeImage} />;
 <;Text>;{props.placeName}<;/Text>;
 <;/View>;
 <;/TouchableOpacity>;
);

const styles = StyleSheet.create({
 listItem: {
 width: "100%",
 marginBottom: 5,
 padding: 10,
 backgroundColor: "#eee",
 flexDirection: "row",
 alignItems: "center"
 },
 placeImage: {
 marginRight: 8,
 height: 30,
 width: 30
 }
});

export default listItem;</code></pre>
<p><strong><span style="color: #0000ff;">PlaceDetail.js</span></strong></p>
<pre><code>import React from "react";
import { Modal, View, Image, Text, Button, StyleSheet } from "react-native";

const placeDetail = props =>; {
 let modalContent = null;

 if (props.selectedPlace) {
 modalContent = (
 <;View>;
 <;Image source={props.selectedPlace.image} style={styles.placeImage} />;
 <;Text style={styles.placeName}>;{props.selectedPlace.name}<;/Text>;
 <;/View>;
 );
 }
 return (
 <;Modal
 onRequestClose={props.onModalClosed}
 visible={props.selectedPlace !== null}
 animationType="slide"
 >;
 <;View style={styles.modalContainer}>;
 {modalContent}
 <;View>;
 <;Button title="Delete" color="red" onPress={props.onItemDeleted} />;
 <;Button title="Close" onPress={props.onModalClosed} />;
 <;/View>;
 <;/View>;
 <;/Modal>;
 );
};

const styles = StyleSheet.create({
 modalContainer: {
 margin: 22
 },
 placeImage: {
 width: "100%",
 height: 200
 },
 placeName: {
 fontWeight: "bold",
 textAlign: "center",
 fontSize: 28
 }
});

export default placeDetail;</code></pre>
<p><strong><span style="color: #0000ff;">PlaceInput.js</span></strong></p>
<pre><code>import React, { Component } from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";

class PlaceInput extends Component {
 state = {
 placeName: ""
 };

 componentDidMount() {

 }

 placeNameChangedHandler = val =>; {
 this.setState({
 placeName: val
 });
 };

 placeSubmitHandler = () =>; {
 if (this.state.placeName.trim() === "") {
 return;
 }

 this.props.onPlaceAdded(this.state.placeName);
 };

 render() {
 return (
 <;View style={styles.inputContainer}>;
 <;TextInput
 placeholder="An awesome place"
 value={this.state.placeName}
 onChangeText={this.placeNameChangedHandler}
 style={styles.placeInput}
 />;
 <;Button
 title="Add"
 style={styles.placeButton}
 onPress={this.placeSubmitHandler}
 />;
 <;/View>;
 );
 }
}

const styles = StyleSheet.create({
 inputContainer: {
 // flex: 1,
 width: "100%",
 flexDirection: "row",
 justifyContent: "space-between",
 alignItems: "center"
 },
 placeInput: {
 width: "70%"
 },
 placeButton: {
 width: "30%"
 }
});

export default PlaceInput;</code></pre>
<p><strong><span style="color: #0000ff;">PlaceList.js</span></strong></p>
<pre><code>import React from "react";
import { StyleSheet, FlatList } from "react-native";

import ListItem from "../ListItem/ListItem";

const placeList = props =>; {
 return (
 <;FlatList
 style={styles.listContainer}
 data={props.places}
 renderItem={(info) =>; (
 <;ListItem
 placeName={info.item.name}
 placeImage={info.item.image}
 onItemPressed={() =>; props.onItemSelected(info.item.key)}
 />;
 )}
 />;
 );
};

const styles = StyleSheet.create({
 listContainer: {
 width: "100%"
 }
});

export default placeList;</code></pre>