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-
|
1 2 3 4 5 6 7 8 9 |
npm install react-redux or yarn add react-redux install redux npm install redux or 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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
|
1 2 3 4 5 6 |
export const addCitizen = (covidModel) => ( { type: 'ADD', payload: covidModel, } ); |
Now dispatch an action by “bindActionCreators” method of redux.
|
1 2 3 4 5 |
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.
|
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
|
1 2 3 4 5 6 |
const App = () => { return ( <Provider store={covidStore}> <CovidContainer/> </Provider> ); |
Step 5: Connect React Native app to the Redux store.
map state and bind action and connect to our Component.
|
1 2 3 4 |
const mapStateToProps = (state) => { const { covidList } = state return { covidList } }; |
Now connect with “connect” method of react-redux
|
1 |
export default connect(mapStateToProps, mapDispatchToProps)(AddCovidComponent); |
References-
https://react-redux.js.org/introduction/quick-start
Be the first to comment.