5 Simple Steps to add Redux Pattern React Native

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 web app programmers and developers. Likewise, the react native tech stage is also walking on the same path and to entice the developers, these technology has introduced a redux for the proper management of a application state. While it is bit harder to easily understand the redux pattern of the react native.

What is Redux?

The react native redux is a JavaScript app container which works for the maintenance of the all states of the application in the easily available route. Redux is especially invented to enhance the reusability of core component of the react native library.

List the amaze key features of redux:

• It improves the consistent of the mobile application.
• It allows the developers to reuse of the code.
• Multi-directional flow of the data.
• Data stores at the top of the root library.
• Allows a single container running access to the application.

Need a top ReactJS development company? Consult us now!

Steps to add Redux Pattern React Native

Now lets start to setting up the redux in react native project, follow these procedure of simple 5 stages:

1. Install the setup in your project and then integrate it:

react-native init ReduxSample
cd ReduxSample

For its integration in a react native project:

yarn add redux react-redux
# or
npm install redux react-redux –save

2. Add the below mentioned code in the index.js file of your react native project:

import {AppRegistry} from ‘react-native’;
import App from ‘./App’;
import React from ‘react’;
import { name as appName } from ‘./app.json’;
import { Provider } from ‘react-redux’;

import configureStore from ‘./src/store’;

const store = configureStore()

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

AppRegistry.registerComponent(appName, () => RNRedux);

Design Pattern:

Store

This is the bunch of data which can be exerted by an application in all its structure and organization of the app data which can empower the logic sense of the reducer.

import { createStore, combineReducers } from ‘redux’;
import indicationReducer from ‘./reducers/IndicationReducer’;

const rootReducer = combineReducers({
indicator: indicationReducer
});

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

export default configureStore;

3. Actions

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 app development object whose root is to have a “Type property” in the string value.

Syntext:

const action_name = “action1”;

Project Example:

export const SHOW_LOADER = ‘SHOW_LOADER’;
export const HIDE_LOADER = ‘HIDE_LOADER’;

You can keep action file separate from component for large applications and use action
creator to create action and dispatch to store.

import {action1} from ‘./actionType’;

Action creator:

Syntext:
function actionCreator(){
return {
type:action_name,// must have
payload:[] //optional property
}
}

Project Example:
import { SHOW_LOADER } from ‘./ActionsConstants’;
import { HIDE_LOADER } from ‘./ActionsConstants’;

export const showLoader = () => {
return {
type: SHOW_LOADER,
}
}
export const hideLoader = () => {
return {
type: HIDE_LOADER,
}
}

4. Reducers

It is the event handler in the app component library of the react native app which specify the changes in the state of the actions in the app component

import { SHOW_LOADER } from ‘../actions/ActionsConstants’;
import { HIDE_LOADER } from ‘../actions/ActionsConstants’;

const initialState = {
isLoaderShowing:false
};

const indicationReducer = (state = initialState, action) => {
switch(action.type) {
case SHOW_LOADER:
return{
…state,
isLoaderShowing: true
};
case HIDE_LOADER:
return{
…state,
isLoaderShowing: false
};
default:
return state;
}
}

export default indicationReducer;

5. Components

Basically it is a class which is used to design and develop an app with interactive Uieither its a web or mobile application. These components have their own stats and properties. There are two kind of component props in the react native which are:

mapStateToProps

mapDispatchToProps

They both work like an show and hide to the component, which a programer get as this.props.show() and this.props.hide() in the code file of your project.

import React, { Component } from ‘react’;
import { StyleSheet, View, ActivityIndicator, TouchableOpacity, Text } from ‘react-native’;
import { connect } from ‘react-redux’;
import { hideLoader, showLoader } from ‘./src/actions/Indicator’;

class App extends Component {

showHideLoader = () => {
if(!this.props.isLoaderShowing){
this.props.show();
}
else {
this.props.hide();
}
}

render() {
let color = this.props.isLoaderShowing ? ‘red’:’blue’;
return (
<View style={ styles.container }>
<View >
<View style={{flex:1, justifyContent:’center’, alignItems:’center’}}>
<View style={{paddingVertical:60}}>
{ this.props.isLoaderShowing && <ActivityIndicator size={“large”} color={‘red’}/>}
</View>
<TouchableOpacity onPress={this.showHideLoader.bind()}
style={{
paddingVertical:15,
paddingHorizontal:50,
borderColor:color,
borderWidth:1,
borderRadius:5,
backgroundColor: color
}}
>
<Text style={{color:’#fff’, fontSize:17, fontWeight: ‘bold’}}>{this.props.isLoaderShowing ? “Hide Loader” : “Show Loader”}</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
paddingTop: 30,
justifyContent: ‘flex-start’,
alignItems: ‘center’,
}
});

const mapStateToProps = state => {
return {
isLoaderShowing:state.indicator.isLoaderShowing,
}
}

const mapDispatchToProps = dispatch => {
return {
show: () => {
dispatch(showLoader())
},
hide: () => {
dispatch(hideLoader())
}
}
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Looking for a top software Development Company? Consult Inwizards.