React Native Redux

ashwini gupta

6 March 2021

In this blog, I am describing the React Native Redux. Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience.

Redux 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.

Installation-

npm install react-redux
or
yarn add react-redux

install redux

npm install redux
or
yarn add redux

npm install react-redux

yarn add react-redux

install redux

npm install redux

yarn add redux

Let’s start implementation.

Redux can be broken down into a few sections while building the application which is listed below.

Actions: “are payloads of information that send data from your application to your store. They are the only source of information for the store.” this means if any state change necessary the change required will be dispatched through the actions.

Reducers: “Actions describe the fact that something happened, 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 reducer’s duty to make the necessary changes to the state and return the new state of the application.

Store: 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 that will violate the use of redux which only has a single store.

Steps for Implementing Redux in React Native app

Step 1: Reducer function.

Create a global Store object, implement Reducer function i.e update by the action, and return the updated store to Component. Following Snippet for creating reducer and combine that reducer via “combineReducers” method of redux.

import { combineReducers } from "redux";

const INITIAL_COVID_STATE = {
citizens : [],
isUpdate:false,
}

const covidReducer = (state=INITIAL_COVID_STATE, action)=>{
switch (action.type) {
case "ADD":
citizens.push(action.payload);
return {citizens, isUpdate};
case "UPDATE":
let isUpdating = !isUpdate
return {citizens, isUpdate : isUpdating};
default:
return state;
}
}

export default combineReducers({
covidList : covidReducer
})

import { combineReducers } from "redux";

const INITIAL_COVID_STATE = {

citizens : [],

isUpdate:false,

}

const covidReducer = (state=INITIAL_COVID_STATE, action)=>{

switch (action.type) {

case "ADD":

citizens.push(action.payload);

return {citizens, isUpdate};

case "UPDATE":

let isUpdating = !isUpdate

return {citizens, isUpdate : isUpdating};

default:

return state;

}

export default combineReducers({

covidList : covidReducer

})

Step 2: Create Actions

following snippet for creating Actions

export const addCitizen = (covidModel) => (
{
type: 'ADD',
payload: covidModel,
}
);

export const addCitizen = (covidModel) => (

{

type: 'ADD',

payload: covidModel,

}

);

Now dispatch an action by “bindActionCreators” method of redux.

const mapDispatchToProps = dispatch => (
bindActionCreators({
addCitizen,
}, dispatch)
);

const mapDispatchToProps = dispatch => (

bindActionCreators({

addCitizen,

}, dispatch)

);

Step 3: Create a Redux Store.

create a store with “createStore” method of redux and pass your reducer in this method.

const covidStore = createStore(CovidReducer)

1	const covidStore = createStore(CovidReducer)

Step 4: Pass the Store to the React Native app.

pass store to your component that use the store by using Provider component of react-redux

const App = () => {
return (
<Provider store={covidStore}>
<CovidContainer/>
</Provider>
);

const App = () => {

return (

</Provider>

);

Step 5: Connect React Native app to the Redux store.

map state and bind action and connect to our Component.

const mapStateToProps = (state) => {
const { covidList } = state
return { covidList }
};

const mapStateToProps = (state) => {

const { covidList } = state

return { covidList }

};

Now connect with “connect” method of react-redux

export default connect(mapStateToProps, mapDispatchToProps)(AddCovidComponent);

1	export default connect(mapStateToProps, mapDispatchToProps)(AddCovidComponent);

References-

https://react-redux.js.org/introduction/quick-start