{"id":21116,"date":"2021-10-08T08:56:01","date_gmt":"2021-10-08T08:56:01","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=21116"},"modified":"2024-11-20T06:25:14","modified_gmt":"2024-11-20T06:25:14","slug":"redux-and-context-api-with-react-native","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/redux-and-context-api-with-react-native","title":{"rendered":"Redux and Context API with React Native App: Introduction, Use Cases, Implementation, and Comparison"},"content":{"rendered":"<p>Developer 1 and Developer 2 were fighting over which state management tool is better- Redux or Context API. They both listed pros and cons but sadly none realized the actual use case and purpose of <em>Redux and Context API<\/em>.<\/p>\n<p>If you\u2019re one of the developer 1 or 2, then continue reading the tutorial to learn why it shouldn\u2019t be Redux vs Context API.<\/p>\n<h2>Introduction<\/h2>\n<p>If you\u2019re having a Javascript background then you might be familiar with the terms <b>Redux and Context API<\/b>. And probably, you might have come across so many blogs that debate on which is better- Redux vs Context API. I assumed the same unless I realized it\u2019s not! <\/p>\n<p>After reading a bunch of blogs, I concluded the purpose of both the tools and how different they are from each other. If you aren\u2019t aware yet, don\u2019t worry this tutorial will help you understand the use cases of both tools with a basic demo example. Here, we will build an app using both approaches and discuss them. <\/p>\n<p>Let\u2019s get started, then!<\/p>\n<h2>Tutorial Goal<\/h2>\n<ul class=\"bullets text-left\">\n<li>Understanding Redux and Context API<\/li>\n<li>Comparing the working of Redux and Context API<\/li>\n<li>Exploring the purpose and use case of Redux and Context API<\/li>\n<li>A demo application using Redux and Context API approach<\/li>\n<\/ul>\n<h2>Redux: Introduction and Building Blocks<\/h2>\n<p>According to documentation-<\/p>\n<p><em>Redux is a pattern and library for managing and updating application state, using events called &#8220;actions&#8221;. It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.<\/em><\/p>\n<p>The documentation clearly mentions that redux is for <b>\u201cmanaging state\u201d<\/b> and <b>understanding how the state is updated<\/b>.<\/p>\n<h3>Use Cases of Redux<\/h3>\n<ul class=\"bullets text-left\">\n<li>The primary goal of redux, as mentioned in the doc, is to manage and keep track of the state.<\/li>\n<li>Keeping your state management logic separate from the user interface layer<\/li>\n<li>Faster logic debugging<\/li>\n<\/ul>\n<p>Redux is mainly used to manage the state of React applications in a centralized place where to access the state anywhere in the application. Technically, The concept of Redux is based on Flux architecture and this concept isn\u2019t restricted to React apps; there are implementations in different technologies, as well (e.g. NgRx for Angular). But Redux is particularly implemented with React.<\/p>\n<p>You Might Like To Read: <a href=\"https:\/\/www.bacancytechnology.com\/blog\/how-to-use-redux-with-react-hooks-in-react-native-application\" target=\"_blank\" rel=\"noopener\">How to Use Redux with React Hooks in React Native Application<\/a><\/p>\n<h3>Packages needed<\/h3>\n<ul class=\"bullets text-left\">\n<li><strong>redux<\/strong>: For the functions like <em>createStore()<\/em>, <em>combineReducer()<\/em> etc.<\/li>\n<li><strong>react-redux<\/strong>: For the functions like <em>connect()<\/em> etc.<\/li>\n<\/ul>\n<h3>Building Blocks of Redux<\/h3>\n<p>It consists of mainly four building blocks:<\/p>\n<p>1. Reducer: These are functions with state and actions passed in as arguments. It contains <em>\u201caction.type\u201d<\/em> in switch cases which returns the changed value. It optionally accepts the payload (generally created in a separate file known as <em>reducers.js<\/em>)<\/p>\n<p>2. Store: Store is the collection of all data. You can pass it to the provider.<\/p>\n<p>3. Provider: A React component that accepts store as an argument (usually created in <em>index.js<\/em>)<\/p>\n<p>4. Actions: Functions that provide\/return action type and payload to the dispatcher which will further call the respective reducer (generally created in a separate file known as <em>actions.js<\/em>)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/Building-Blocks-of-Redux-min.jpg\" alt=\"\" width=\"1100\" height=\"600\" class=\"aligncenter size-full wp-image-21153\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/Building-Blocks-of-Redux-min.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/Building-Blocks-of-Redux-min-300x164.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/Building-Blocks-of-Redux-min-1024x559.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/Building-Blocks-of-Redux-min-768x419.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h2>Context API: Introduction and Building Blocks<\/h2>\n<p>React documentation explains context API as-<br \/>\n<em>Context provides a way to pass data through the component tree without having to pass props down manually at every level.<\/em> <\/p>\n<p><em>In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.<\/em><\/p>\n<p>If you can observe the documentation states context for <b>\u201cpassing\u201d<\/b> and <b>\u201csharing\u201d<\/b> values and mention nothing about <b>\u201cmanaging the state\u201d<\/b><\/p>\n<h3>Use Cases of Context API<\/h3>\n<p>The main purpose of using context API is avoiding \u2018prop drilling\u2019 &#8211; passing prop at every level. It is more like a pipeline used to pass values from one end to another. <\/p>\n<p>Context API provides the easiest way for passing data through the component tree so that you don\u2019t have to pass props down manually at every level. For example, assume we have a component tree consisting of A, B, C, and D components. Now you need to pass props from A to D, so rather than passing it A > B > C > D,i.e., to every component, with the help of context you can directly pass to A > D.<\/p>\n<p>Now, many blogs have mentioned that Context API is the best replacement for Redux because it\u2019s in-built and you don\u2019t have to install dependencies for the same. <em>Is this really true- Can Context API replace Redux?<\/em> We will discuss this in a further section. Stay tuned to explore!<\/p>\n<h3>Building Blocks of Context API<\/h3>\n<p>We can divide the Context API into three blocks:<br \/>\n1. Context: Use <em>createContext()<\/em> function that takes the default value as a first argument. Here it is optional to pass a Javascript object. You can implement multiple contexts in your app.<\/p>\n<p>2. Provider: After creating context, the Provider provides the capability for accessing the context. It provides functions &#038; data to pass values further to the component.<\/p>\n<p>3. Consumer: Consumer allows access to the value to child components which are wrapped by Provider. It has two types-<\/p>\n<ul class=\"bullets text-left\">\n<li><strong>Context.Consumer:<\/strong> <em>Context.Consumer<\/em> can be used for both functional and class-based components. However, through this approach, the context is accessible within the render method only.<\/li>\n<li><strong>Static ContextType:<\/strong> <em>Static contextType<\/em> can be used only for Class-based components.<\/li>\n<\/ul>\n<h2>Redux and Context API Example<\/h2>\n<ul class=\"bullets text-left\">\n<li>The example below is based on a Counter. The initial value will be 0 and it has two buttons to increment and decrement the value.<\/li>\n<li>Inside the main parent counter component, there will be three child components-<\/li>\n<\/ul>\n<p>\u2022 one for changing the counter value<br \/>\n\u2022 two for each of the buttons. <\/p>\n<p>The initial setup would be the same for both Context and Redux approaches.<\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Are you struggling to choose between the Context and Redux approach and implement it in your application?<\/span><br \/>\nGet in touch with the best <a href=\"https:\/\/www.bacancytechnology.com\/react-native-app-development\" target=\"_blank\" rel=\"noopener\">React Native App Development Company<\/a>, who have the developers with such expertise to make the implementation hustle-free and painless.!<\/i><\/strong><\/p>\n<h3>Create a React Native App<\/h3>\n<p>Initially, create a react native app using the following command <\/p>\n<pre>react-native init CounterDemo<\/pre>\n<h2>Redux Approach: How to Implement Redux in React Native App?<\/h2>\n<p><b>Install Required dependencies for Redux<\/b><\/p>\n<pre>npm install redux --save\r\nnpm install react-redux --save<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Redux-Approach-min.jpg\" alt=\"The Redux Approach\" width=\"1100\" height=\"600\" class=\"aligncenter size-full wp-image-21154\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Redux-Approach-min.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Redux-Approach-min-300x164.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Redux-Approach-min-1024x559.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Redux-Approach-min-768x419.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h3>Redux Store Set Up<\/h3>\n<p>We will create our store within our <b>App.js<\/b> file.<\/p>\n<p><b>\/\/ App.js<\/b><\/p>\n<pre>import React, { Component } from 'react';\r\nimport { Provider } from 'react-redux';\r\nimport { createStore } from 'redux';\r\nimport totalReducers from '.\/reducers\/index.js';\r\nimport Counter from '.\/components\/counters';\r\n \r\nconst store = createStore(totalReducers);\r\n \r\nexport default class App extends Component{\r\n  render(){\r\n    return(\r\n      < Provider store= {store} >\r\n        < Counter \/ >\r\n      < \/Provider >\r\n    );\r\n  }\r\n}<\/pre>\n<ul class=\"bullets text-left\">\n<li>Here we are importing <mark>totalReducers<\/mark> from the reducers folder.<\/li>\n<li><mark>createStore()<\/mark> function accepts one argument as <mark>totalReducers<\/mark> object and generates the store.<\/li>\n<li>The Provider component makes sure the store is available throughout the application.<\/li>\n<\/ul>\n<h3>Reducers Set Up<\/h3>\n<p>Reducers return the data required by the application. In this demo, the reducer will return the updated counter value. Here is our <em>counterReducer.js<\/em> file inside the reducers folder.<\/p>\n<p><b>\/\/ reducers\/counterReducer.js<\/b><\/p>\n<pre>let count= 0;\r\n \r\nexport default (state = count , action) => {\r\n    switch (action.type) {\r\n        case \"Increment\": \r\n            count ++\r\n            break;\r\n        case \"Decrement\": \r\n            count --\r\n            break;\r\n        default:\r\n            count;\r\n    }\r\n    return count;  \r\n}<\/pre>\n<p><b>Explanation<\/b><\/p>\n<ul class=\"bullets text-left\">\n<li>The reducer defined above will always return the count value.<\/li>\n<li>Increment &#038; Decrement are the actions types that will update the value as shown above.<\/li>\n<li>We will combine all the reducers inside the index.js file inside the reducers folder.<\/li>\n<\/ul>\n<p><b>\/\/ reducers\/index.js<\/b><\/p>\n<pre>import {combineReducers} from 'redux';\r\nimport counterReducer from '.\/counterReducer';\r\n \r\nconst totalReducers= combineReducers({\r\n  count: counterReducer,\r\n});\r\n \r\nexport default totalReducers;<\/pre>\n<p><strong>Explanation<\/strong><\/p>\n<ul class=\"bullets text-left\">\n<li>Here we will combine all the reducers as arguments of the <em>combineReducers()<\/em> function of the Redux library.<br \/>\n<h3>Actions Set Up<\/h3>\n<p>Create two actions: <em>Increment &#038; Decrement<\/em>.<\/p>\n<p><b>\/\/ actions\/index.js<\/b><\/p>\n<pre>export function increment(){\r\n    return{\r\n      type: \"Increment\"\r\n    };\r\n  }\r\n \r\nexport function decrement(){\r\n  return{\r\n    type: \"Decrement\"\r\n  };\r\n}<\/pre>\n<h3>UI Component<\/h3>\n<p>We will simply create only one component called a counter component. For using reducers and actions, we have to implement these functions:<\/p>\n<ul class=\"bullets text-left\">\n<li><em>mapStateToProps()<\/em> &#8211; It simply accepts your reducer data, and converts it into a simple usable prop. With the help of <em>this.props.data<\/em> we will use data as a prop in our component.<\/li>\n<\/ul>\n<pre>function mapStateToProps(state){\r\n    return{\r\n      count: state.count\r\n    };\r\n}<\/pre>\n<p><em><strong>Note<\/strong>: Keep in mind how we assigned names to reducers in the combineReducers function because we have to use the same name for calling respective reducers.<\/em><\/p>\n<ul class=\"bullets text-left\">\n<li><em>mapDispatchToProps()<\/em> &#8211; It accepts your actions, and converts them into a simple usable prop.<\/li>\n<\/ul>\n<pre>function mapDispatchToProps(dispatch){\r\n        return bindActionCreators({increment, decrement}, dispatch)\r\n}<\/pre>\n<p><em>Note: <b>bindActionCreators<\/b> function simply combines our actions into one object.<\/em><\/p>\n<p>Moving towards the component that manages the user interface.<\/p>\n<p><b>\/\/ component\/counter.js<\/b><\/p>\n<pre>class Counters extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n  }\r\n \r\n  render() {\r\n    return (\r\n      < View style={styles.mainContainer} >\r\n        < Text style={{marginBottom: 20, fontWeight: 'bold'}} >\r\n          { 'The Redux Approach' }\r\n        < \/Text >\r\n        < Text style={styles.counterNumber}>{this.props.count}< \/Text >\r\n        < View style={styles.buttonContainer} >\r\n          < TouchableOpacity\r\n            style={styles.buttonStyle}\r\n            onPress={ ( ) => this.props.increment ( ) } >\r\n            < Text style={{color: 'white'}}>Increment +< \/Text >\r\n          < \/TouchableOpacity >\r\n          < TouchableOpacity\r\n            style={[styles.buttonStyle, {backgroundColor: 'red'}]}\r\n            onPress={() => this.props.decrement()} >\r\n            < Text style={{color: 'white'}}>Decrement -< \/Text >\r\n          < \/TouchableOpacity >\r\n        < \/View >\r\n      < \/View >\r\n    );\r\n  }\r\n}\r\n \r\nfunction mapStateToProps(state) {\r\n  return {\r\n    count: state.count,\r\n  };\r\n}\r\n \r\nfunction mapDispatchToProps(dispatch) {\r\n  return bindActionCreators({increment, decrement}, dispatch);\r\n}\r\n \r\nexport default connect(mapStateToProps, mapDispatchToProps)(Counters);<\/pre>\n<p>For styling your component you can use the below code<\/p>\n<pre>const styles = StyleSheet.create({\r\n  mainContainer: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  },\r\n  counterNumber: {\r\n    fontSize: 35,\r\n    fontWeight: 'bold',\r\n  },\r\n  buttonContainer: {\r\n    flexDirection: 'row',\r\n  },\r\n  buttonStyle: {\r\n    backgroundColor: 'green',\r\n    borderWidth: 1,\r\n    height: 30,\r\n    width: '25%',\r\n    borderRadius: 5,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  },\r\n});<\/pre>\n<h3>Finishing up<\/h3>\n<p>So far we are done with redux set up, logic, and user interface for the counter demo. Now, just a simple step remaining &#8211; import our App file in our index.js file.<\/p>\n<p><b>\/\/ index.js<\/b><\/p>\n<pre>import {AppRegistry} from 'react-native';\r\nimport App from '.\/src\/App.js';\r\nimport {name as appName} from '.\/app.json';\r\n \r\nAppRegistry.registerComponent(appName, () => App);<\/pre>\n<p><b>Git Repo link<\/b>: https:\/\/github.com\/sunil-bacancy\/CounterDemo<\/p>\n<h2>Context API Approach: How to Implement Context API in React Native App?<\/h2>\n<p>Since the context API is in-built functionality we don\u2019t need to install third-party dependencies.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Context-API-approach-min.jpg\" alt=\"The Context API approach\" width=\"1100\" height=\"600\" class=\"aligncenter size-full wp-image-21155\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Context-API-approach-min.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Context-API-approach-min-300x164.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Context-API-approach-min-1024x559.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/10\/The-Context-API-approach-min-768x419.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h3>Folder structure<\/h3>\n<p>Create a folder <b>src<\/b> at the root of your app. Within the <em>src<\/em> folder, we have to create 3 folders that are <strong>reducers, components, state<\/strong> and one file <strong>App.js<\/strong>.<\/p>\n<h3>Reducer Set Up<\/h3>\n<p>Just like Redux, declare reducer with Context API.<\/p>\n<p><b>\/\/ reducers\/globalReducer.js<\/b><\/p>\n<pre>export default countReducer = (state , action) => {\r\n    switch (action.type) {\r\n        case \"Increment\": \r\n            return{\r\n                ...state,\r\n                counter: state.counter + 1,\r\n            }\r\n        case \"Decrement\": \r\n            return{\r\n                ...state,\r\n                counter: state.counter - 1,\r\n            }\r\n        default:\r\n            return{\r\n                state\r\n            }\r\n    }  \r\n}<\/pre>\n<h3>Create the context<\/h3>\n<ul class=\"bullets text-left\">\n<li>Create a context using <b>createContext()<\/b> and pass the initial state as arguments. You can also define without passing arguments.<\/li>\n<li>Define a function that will pass the data via Provider.<\/li>\n<li><strong>useReducer()<\/strong> will take a reducer having default state, then return the updated value and dispatch the function.<\/li>\n<li>Inside the Provider function, use <strong>useReducer()<\/strong> with arguments- reducer and initial state. The returned and dispatched states are later passed as values to the Provider.<\/li>\n<\/ul>\n<p><b>\/\/ state\/globalState.js<\/b><\/p>\n<pre>import React, {createContext, useReducer} from 'react';\r\nimport countReducer from '..\/reducers\/globalReducer';\r\n \r\nconst initialState = {\r\n    counter: 0\r\n}\r\n \r\nexport const GlobalContext = createContext(initialState);\r\n \r\nexport default GlobalProvider = ({children}) => {\r\n    const [state, dispatch] = useReducer(countReducer, initialState);\r\n \r\n    return(\r\n        <GlobalContext.Provider value = {{state, dispatch}}>\r\n            {children}\r\n        <\/GlobalContext.Provider>\r\n    )\r\n}<\/pre>\n<h3>Providing Context<\/h3>\n<p>After creating the context, we need to provide the context so that it is accessible in the child components. For that, you need to wrap it within the Provider.<\/p>\n<p><b>\/\/ src\/App.js<\/b><\/p>\n<pre>import React, { Component } from 'react';\r\nimport GlobalProvider from '.\/state\/globalState';\r\nimport Counters from '.\/components\/counter';\r\n \r\nexport default class App extends Component {\r\n    render(){\r\n        return (\r\n            < GlobalProvider >\r\n                < Counters \/>\r\n            < \/GlobalProvider >\r\n        )\r\n    }\r\n}<\/pre>\n<h3>Consuming Context<\/h3>\n<p>Use useContext() for consuming the context in respective child components.<\/p>\n<p><b>\/\/ components\/counter.js<\/b><\/p>\n<pre>import React, { Component, useContext } from 'react';\r\nimport { View, Text, TouchableOpacity, StyleSheet } from 'react-native';\r\nimport {GlobalContext} from '..\/state\/globalState';\r\n \r\nconst Counters = () => {\r\n \r\n   const {state} = useContext(GlobalContext);\r\n   const {dispatch} = useContext(GlobalContext);\r\n \r\n   return(\r\n      < View style = { styles.mainContainer } >\r\n          < Text style = {{marginBottom: 20, fontWeight: 'bold'}} >\r\n            {'The Context API Approach' }< \/Text >\r\n              < Text style = { styles.counterNumber } >\r\n                 { state.counter  }\r\n              < \/Text>\r\n                < View style = { styles.buttonContainer } > \r\n                  < TouchableOpacity \r\n                     style = { styles.buttonStyle } \r\n                     onPress =  {  ( )=> dispatch({type: \"Increment\"} ) }\r\n                   >\r\n                     < Text style = {{ color: 'white' }} >\r\n                       Increment +\r\n                     < \/Text >\r\n                   < \/TouchableOpacity >\r\n                   < TouchableOpacity \r\n                      style = {[\r\n                               styles.buttonStyle, \r\n                               { backgroundColor:'red' } \r\n                              ]}\r\n                    onPress = { ()=> dispatch({type: \"Decrement\"})}\r\n                   >\r\n                     < Text style = {{ color: 'white' }} >\r\n                       Decrement -\r\n                      <\/Text >\r\n                   < \/TouchableOpacity >\r\n             < \/View >\r\n       < \/View >\r\n    )\r\n}\r\n \r\nexport default Counters;<\/pre>\n<p>For styling your component you can use the below code.<\/p>\n<pre>const styles = StyleSheet.create({\r\n    mainContainer: {\r\n        flex: 1,\r\n        justifyContent: 'center',\r\n        alignItems: 'center'\r\n    },\r\n    counterNumber: {\r\n        fontSize: 35,\r\n        fontWeight: 'bold'\r\n    },\r\n    buttonContainer: {\r\n        flexDirection: 'row'\r\n    },\r\n    buttonStyle: {\r\n        backgroundColor: 'green',\r\n        borderWidth: 1,\r\n        height: 30,\r\n        width: '25%',\r\n        borderRadius: 5,\r\n        justifyContent: 'center',\r\n        alignItems: 'center', \r\n    },\r\n})<\/pre>\n<p><b>Git Repo link<\/b>: https:\/\/github.com\/sunil-bacancy\/CounterContextDemo<\/p>\n<h2>Redux and Context API: Comparison<\/h2>\n<h3>Redux<\/h3>\n<ul class=\"bullets text-left\">\n<li>Storing and managing values<\/li>\n<li>Works outside React components<\/li>\n<li>Avoids prop-drilling<\/li>\n<li>Through dispatching an action one can update the value<\/li>\n<li>Provides DevTools to show history of actions and state values<\/li>\n<li>Allows application code for triggering side effects through middlewares<\/li>\n<\/ul>\n<h3>Context API<\/h3>\n<ul class=\"bullets text-left\">\n<li>Not for storing or managing values<\/li>\n<li>Works in React components only<\/li>\n<li>Passes a single value be it objects, primitives, classes, etc.<\/li>\n<li>Avoids prop-drilling<\/li>\n<li>Provides current context value for Provider and Consumer but doesn\u2019t display any history of how the value is changed.<\/li>\n<li>Excludes side effects mechanism &#8211; exclusively for component rendering<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>I hope the tutorial helped you understand how different Context and Redux are. Moreover, try to implement both the approaches and play around with the code to dig deeper. For more such React Native tutorials, we have a <a href=\"https:\/\/www.bacancytechnology.com\/tutorials\/react-native\" target=\"_blank\" rel=\"noopener\">React Native Tutorials<\/a> page that consists of step-by-step guidelines with the github source. <\/p>\n<p>I can understand how difficult it can be to organize and manage a global store for a complex application, and also how precise you need to be for implementing Context API in your application. In case you have a large and complex project and want to implement Redux or Context API then feel free to contact us and hire  <a href=\"https:\/\/www.bacancytechnology.com\/hire-react-native-developer\" target=\"_blank\" rel=\"noopener\">React Native developer<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developer 1 and Developer 2 were fighting over which state management tool is better- Redux or Context API. They both listed pros and cons but sadly none realized the actual use case and purpose of Redux and Context API. If you\u2019re one of the developer 1 or 2, then continue reading the tutorial to learn [&hellip;]<\/p>\n","protected":false},"author":71,"featured_media":21151,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[714],"tags":[],"coauthors":[1786],"class_list":["post-21116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/21116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=21116"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/21116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/21151"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=21116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=21116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=21116"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}