{"id":5809,"date":"2023-03-21T10:55:25","date_gmt":"2023-03-21T10:55:25","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=5809"},"modified":"2023-03-21T10:55:25","modified_gmt":"2023-03-21T10:55:25","slug":"the-role-of-redux-in-react-native-app-development","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/","title":{"rendered":"The Role Of Redux In React Native App Development"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">There must be times when you encountered a large number of components to manage the state internally in your React Native application.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Components that internally handle state are used to create React Native apps. The built-in state management of React Native app development is effective for apps with few components and no plans to grow in the future. Sharing state among components becomes complicated for applications with many components or for those with the potential to grow in the future.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To address this problem, state management frameworks like Redux exist. Redux gives an application&#8217;s state a central location where any component may access the values kept there. In Redux language, the &#8220;central location&#8221; is referred to as a store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this post, we&#8217;ll look at leveraging Redux to handle the state in a React Native application. This piece addresses:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Asynchronous activities and action kinds<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Establishing a reducer<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Setting up a Redux store<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dispatching actions inside a React Native component using React Hooks<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let&#8217;s build an example app that retrieves a list of movie items from<\/span><a href=\"https:\/\/developers.themoviedb.org\/3\/getting-started\/introduction\"><span style=\"font-weight: 400;\"> The Movie Database<\/span><\/a><span style=\"font-weight: 400;\"> in order to better comprehend these ideas (TMDB API). This project&#8217;s source code is accessible at this <\/span><a href=\"https:\/\/github.com\/amandeepmittal\/react-native-examples\/tree\/master\/reduxWithHooks\"><span style=\"font-weight: 400;\">GitHub repository<\/span><\/a><span style=\"font-weight: 400;\">. Each movie in the list can be marked as a favorite by the app user, who can then view it from a different screen by storing it in the application&#8217;s state.<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><span style=\"font-weight: 400;\">Prerequisites<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Make sure you have the following installed on a local environment before you start:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Installed <\/span><a href=\"https:\/\/nodejs.org\/en\/\"><span style=\"font-weight: 400;\">Node.js<\/span><\/a><span style=\"font-weight: 400;\"> version &gt;= <\/span><b>14.x.x<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">TMDB account, access to API key,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A package manager such as npm, yarn, or npx<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.npmjs.com\/package\/react-native-cli\"><span style=\"font-weight: 400;\">react-native-cli <\/span><\/a><span style=\"font-weight: 400;\">installed (or use npx)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Get the API key by navigating to <\/span><b>Settings &gt; API<\/b><span style=\"font-weight: 400;\"> section after logging into your TMDB account and looking for it under the section <\/span><b>API Key (v3 auth).<\/b><\/p>\n<p><img decoding=\"async\" class=\"wp-image-5810 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/the-movie-database-api-homepage.jpg\" alt=\"\" width=\"697\" height=\"567\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/the-movie-database-api-homepage-640x521.jpg 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/the-movie-database-api-homepage-400x325.jpg 400w\" sizes=\"(max-width: 697px) 100vw, 697px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">We&#8217;ll use an iOS simulator to show this. The code snippets presented in this post will function the same on an Android device or an emulator.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using-Redux-with-React-Native\"><\/span><span style=\"font-weight: 400;\">Using Redux with React Native\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1-Lets-get-started\"><\/span><span style=\"font-weight: 400;\">1. Let\u2019s get started\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Use the React Native CLI to enter the project directory to begin building a new React Native project. To develop a bottom tab navigator, we&#8217;ll first install necessary dependencies, such as <\/span><b>react-native-vector-icons<\/b><span style=\"font-weight: 400;\"> and<\/span><b> react-navigation\/bottom-tabs<\/b><span style=\"font-weight: 400;\">, and then we&#8217;ll build a Redux store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">See the official documentation for installation <\/span><a href=\"https:\/\/reactnavigation.org\/docs\/getting-started\"><span style=\"font-weight: 400;\">instructions<\/span><\/a><span style=\"font-weight: 400;\"> for the React Navigation library. Throughout time, these dependencies could shift.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These<\/span><a href=\"https:\/\/github.com\/oblador\/react-native-vector-icons#installation\"><span style=\"font-weight: 400;\"> directions<\/span><\/a><span style=\"font-weight: 400;\"> will help you configure react-native-vector-icons.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After installing these, use a terminal window and issue the following commands:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">npx react-native init reduxExample\r\n\r\ncd reduxExample\r\n\r\nyarn add @react-navigation\/native @react-navigation\/bottom-tabs\r\n\r\nreact-native-gesture-handler react-native-reanimated\r\n\r\nreact-native-screens react-native-safe-area-context\r\n\r\n@react-native-community\/masked-view react-native-vector-icons axios\r\n\r\nredux@4.0.5 redux-thunk@2.3.0 react-redux@7.2.2<\/pre>\n<p><span style=\"font-weight: 400;\">Installing the pods will allow you to finish connecting these external libraries using CocoaPods if you&#8217;re developing for iOS:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">npx pod-install ios<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"2-Create-tabs-and-a-tab-navigator\"><\/span><span style=\"font-weight: 400;\">2. Create tabs and a tab navigator\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We&#8217;ll make a tab navigator that will appear at the bottom of the screen after the installation procedure. A list of movies will be shown on the first tab utilizing information gathered from the TMDB API endpoint. A list of the movies that the app user has marked as favorites will appear in the second option.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We&#8217;ll begin by making two practice screens. Make two new files in a new directory named screens\/, as follows:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Favorites.js<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Movies.js<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Each file should have the matching code snippet added:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true height:250 nums:false lang:default decode:true \">\/\/ screens\/Favorites.js\r\n\r\nimport React from 'react';\r\n\r\nimport {View, Text, StyleSheet} from 'react-native';\r\n\r\nconst Favorites = () =&gt; {\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;View style={styles.container}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text&gt;Favorites&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n\r\n\u00a0\u00a0container: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0flex: 1,\r\n\r\n\u00a0\u00a0\u00a0\u00a0justifyContent: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0alignItems: 'center',\r\n\r\n\u00a0\u00a0},\r\n\r\n});\r\n\r\nexport default Favorites;\r\n\r\n\/\/ screens\/Movies.js\r\n\r\nimport React from 'react';\r\n\r\nimport {View, Text, StyleSheet} from 'react-native';\r\n\r\nconst Movies = () =&gt; {\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;View style={styles.container}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text&gt;Movies&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n\r\n\u00a0\u00a0container: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0flex: 1,\r\n\r\n\u00a0\u00a0\u00a0\u00a0justifyContent: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0alignItems: 'center',\r\n\r\n\u00a0\u00a0},\r\n\r\n});\r\n\r\nexport default Movies;<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Then, make a directory named navigation and a new file inside of it called RootNavigator.js. To add a bottom tab, use the piece of code below:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To render the RootNavigator, edit the App.js file:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">import React from 'react';\r\n\r\nimport RootNavigator from '.\/navigation\/RootNavigator';\r\n\r\nconst App = () =&gt; {\r\n\r\n\u00a0\u00a0return &lt;RootNavigator \/&gt;;\r\n\r\n};\r\n\r\nexport default App;<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"3-Build-the-application\"><\/span><span style=\"font-weight: 400;\">3. Build the application<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We&#8217;ll create the programme and execute it on an iOS simulator after this setup is finished. Use the npx react-native run-ios command to create the iOS version of the app. Execute the command npx react-native run-android to run it on an Android emulator.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The output on an iOS simulator is displayed as follows:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-5813 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/application-run-ios-simulator-output-548x1024-1.jpg\" alt=\"\" width=\"400\" height=\"748\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/blog.logrocket.com\/comprehensive-guide-to-using-redux-in-react-native\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Image reference<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Integrate-an-action-to-capture-data\"><\/span><span style=\"font-weight: 400;\">4. Integrate an action to capture data<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In Redux, an action is a payload of data that is sent from the application to the store and causes an event to occur. The state of the application can be said to have changed when anything occurs that is directly relevant to that state.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Redux uses a JavaScript object that may be considered a read-only object to describe the state. There is only one way to change it: by acting.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Getting the data from the API is the first step in creating the sample app. The application&#8217;s state is then updated with this information, and a component screen may utilize it to show a list of movies.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">An item with these two qualities is the building block of an action:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A simple string describing the kind of activity you wish to start. For instance, the kind of action here is GET MOVIES if you wish to retrieve every movie item.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A data or information-containing payload<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Create a new file named actions.js and a new directory called redux at the beginning. Include the next action type:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">export const GET_MOVIES = 'GET_MOVIES';<\/pre>\n<p><span style=\"font-weight: 400;\">In order to keep the code sample above manageable, an action type is declared using a const variable. Several actions may be taken in the real world to cause distinct Redux application events.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Making an HTTP request to retrieve data from an API endpoint is the responsibility of the action type GET MOVIES. By specifying an action creator, this is accomplished. This is the name for a function in Redux that produces an action object.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A BASE URL and an API KEY make up an HTTP request. Let&#8217;s retrieve the list of well-liked movies for the sample app. Create a BASE URL by adding the following code and replacing API KEY with the key from your account.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">const API_URL = 'https:\/\/api.themoviedb.org\/3\/movie\/popular';\r\n\r\nconst API_KEY = '&lt;your-api-key&gt;';\r\n\r\nconst PARAMS = 'page=1';\r\n\r\nconst BASE_URL = `${API_URL}?api_key=${API_KEY}&amp;${PARAMS}`;<\/pre>\n<p><span style=\"font-weight: 400;\">Let&#8217;s employ Axios to retrieve the data from the API. It offers an API that includes HTTP request methods like get and put. At the start of the program, import the Axios, and then specify the getMovies action creator.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">export const getMovies = () =&gt; {\r\n\r\n\u00a0\u00a0try {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return async dispatch =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const res = await axios.get(`${BASE_URL}`);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (res.data) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dispatch({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: GET_MOVIES,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0payload: res.data,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Unable to fetch');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0};\r\n\r\n\u00a0\u00a0} catch (error) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/ Add custom logic to handle errors\r\n\r\n\u00a0\u00a0}\r\n\r\n};<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"5-Add-a-movies-reducer\"><\/span><span style=\"font-weight: 400;\">5. Add a movies reducer\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The application&#8217;s state cannot be updated by actions alone. A pure function known as a reducer responds to state changes by computing the updated state of the app depending on the original or current state. Reducers are pure functions, thus if the state doesn&#8217;t change, they always output the same result.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The current state and action are the two inputs given to the reducer. The reducer function&#8217;s general syntax is as follows:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">function Reducer(currentState, action) {\r\n\r\n\u00a0\u00a0return newState;\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">Create a new file with the name reducers.js. Add the GET MOVIES action from the actions.js file. Create an initial state object by defining it with two empty arrays.\u00a0 Create an initial state object by defining it with two empty arrays. The things that were favorited by the app user are stored in the second array, while the first array displays the movie items that were obtained from the API endpoint.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The moviesReducer function should then be defined with the arguments initialState and action. It switches between several action kinds using a switch statement. Each action type has a unique case that defines it. There is only one action type available for now, and that is to retrieve a list of movies. The default case returns the present state if the state doesn&#8217;t change.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import {GET_MOVIES} from '.\/actions';\r\n\r\nconst initialState = {\r\n\r\n\u00a0\u00a0movies: [],\r\n\r\n\u00a0\u00a0favorites: [],\r\n\r\n};\r\n\r\nfunction moviesReducer(state = initialState, action) {\r\n\r\n\u00a0\u00a0switch (action.type) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0case GET_MOVIES:\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, movies: action.payload};\r\n\r\n\u00a0\u00a0\u00a0\u00a0default:\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return state;\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\nexport default moviesReducer;<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"6-Create-a-store\"><\/span><span style=\"font-weight: 400;\">6. Create a store\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A store is an object that keeps the state of the application globally rather than in individual components. The rootReducer is the first argument of a function called createStore that defines it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">An object comprising all reducers is a rootReducer. There may be more than one reducer in an app whose state is controlled by Redux. CombineReducers is a unique method provided by the Redux package that combines all reducers into a single object.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Configuring the redux-thunk library, which provides access to the thunk middleware, is crucial for building a store. It permits an asynchronous AJAX call to be made by a Redux store, such as retrieving data from an API endpoint. Each action that is dispatched using Redux is by default synchronous in nature.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CreateStore receives a middleware function as its second argument. Redux has a method called applyMiddleware that may be used to utilize middleware. This function receives arguments from every middleware function.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Copy the following code snippet into a new file called store.js:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import {createStore, combineReducers, applyMiddleware} from 'redux';\r\n\r\nimport thunk from 'redux-thunk';\r\n\r\nimport moviesReducer from '.\/reducers';\r\n\r\nconst rootReducer = combineReducers({\r\n\r\n\u00a0\u00a0moviesReducer,\r\n\r\n});\r\n\r\nexport const store = createStore(rootReducer,\r\n\r\napplyMiddleware(thunk));<\/pre>\n<p><span style=\"font-weight: 400;\">Include this store in the App.js file to utilize it to control the state of the React Native application. Including the Provider component from the react-redux library in your imports. It passes the store to the remainder of the <\/span><b>React Native app development<\/b><span style=\"font-weight: 400;\"> while wrapping the app&#8217;s main component.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import React from 'react';\r\n\r\nimport {Provider} from 'react-redux';\r\n\r\nimport {store} from '.\/redux\/store';\r\n\r\nimport RootNavigator from '.\/navigation\/RootNavigator';\r\n\r\nconst App = () =&gt; {\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;Provider store={store}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;RootNavigator \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/Provider&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n};\r\n\r\nexport default App;<\/pre>\n<p><span style=\"font-weight: 400;\">Now, the state of the application may be accessed by any React Native component that is a member of the RootNavigator.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"7-Showcase-a-list-of-movies\"><\/span><span style=\"font-weight: 400;\">7. Showcase a list of movies<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let&#8217;s display a list of movies that were retrieved from the API endpoint inside the Movies.js screen component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Import the following statements first:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import React, {useEffect} from 'react';\r\n\r\nimport {View, Text, FlatList, Image, TouchableOpacity} from 'react-native';\r\n\r\nimport {useSelector, useDispatch} from 'react-redux';\r\n\r\nimport MaterialIcons from 'react-native-vector-icons\/MaterialIcons';\r\n\r\nimport {getMovies} from '..\/redux\/actions';<\/pre>\n<p><span style=\"font-weight: 400;\">The useSelector hook from Redux is used in the code snippet above to get the movies array from the app&#8217;s global state.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Similar to the earlier style, this parameter is supplied within the connect() HOC and is called mapStateToProps. With the new syntax, you may use a selection function to extract data from the Redux state.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To obtain movie-related objects from the Redux store, dispatch the action getMovies using the useDispatch hook. Change the Movies element as follows:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">export default function BooksList() {\r\n\r\n\u00a0\u00a0const {movies} = useSelector(state =&gt; state.moviesReducer);\r\n\r\n\u00a0\u00a0const dispatch = useDispatch();\r\n\r\n\u00a0\u00a0const fetchMovies = () =&gt; dispatch(getMovies());\r\n\r\n\u00a0\u00a0useEffect(() =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0fetchMovies();\r\n\r\n\u00a0\u00a0}, []);\r\n\r\n\u00a0\u00a0\/\/...\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">We&#8217;ll use the FlatList component from React Native to render the movie elements. The renderItem prop is used to show each movie item from the array, and it accepts the movies array as the value of the data argument.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each movie item includes a poster picture that is presented using an Image component as well as some metadata, such as the title of the film and the number of votes it has received. It is possible to construct a &#8220;add to favorite&#8221; button by using the TouchableOpacity component. Next, we will write logic to display the movies on the &#8220;Favorites&#8221; page and to change the status of the movie reducer.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">return (\r\n\r\n\u00a0\u00a0&lt;View style={{flex: 1, marginTop: 44, paddingHorizontal: 20}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;Text style={{fontSize: 22}}&gt;Popular Movies&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;View style={{flex: 1, marginTop: 12}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;FlatList\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data={movies}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0keyExtractor={item =&gt; item.id.toString()}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderItem={({item}) =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const IMAGE_URL =\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'https:\/\/image.tmdb.org\/t\/p\/w185' + item.poster_path;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style={{marginVertical: 12}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style={{flexDirection: 'row', flex: 1}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Image\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0source={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri: IMAGE_URL,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resizeMode=\"cover\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{width: 100, height: 150, borderRadius: 10}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style={{flex: 1, marginLeft: 12}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={{fontSize: 22, paddingRight: 16}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{item.title}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flexDirection: 'row',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0marginTop: 10,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alignItems: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;MaterialIcons color=\"green\" name=\"thumb-up\" size={32} \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: 18,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0paddingLeft: 10,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: '#64676D',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{item.vote_count}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;TouchableOpacity\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress={() =&gt; console.log('Added!')}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeOpacity={0.7}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0marginLeft: 14,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flexDirection: 'row',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 2,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0borderRadius: 20,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alignItems: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0justifyContent: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 40,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 40,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;MaterialIcons\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color=\"orange\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size={32}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"favorite-outline\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/TouchableOpacity&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0showsVerticalScrollIndicator={false}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0&lt;\/View&gt;\r\n\r\n);<\/pre>\n<p><span style=\"font-weight: 400;\">After this step, you will receive the following output:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-5831 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/poster-image-output-react-native-flatlist-component-548x1024-1.jpg\" alt=\"\" width=\"411\" height=\"768\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/blog.logrocket.com\/comprehensive-guide-to-using-redux-in-react-native\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Image reference<\/span><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"8-Build-actions-to-integrate-and-remove-favorites\"><\/span><span style=\"font-weight: 400;\">8. Build actions to integrate and remove favorites\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We&#8217;ll add two additional action kinds and their authors to the actions.js file. An app user can add or remove a movie from their favorites list using one of these action kinds.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">export const ADD_FAVORITE_ITEM = 'ADD_FAVORITE_ITEM';\r\n\r\nexport const REMOVE_FAVORITE_ITEM = 'REMOVE_FAVORITE_ITEM';<\/pre>\n<p><span style=\"font-weight: 400;\">For each of the aforementioned action kinds, specify the action creators next.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">export const addFavorite = movie =&gt; dispatch =&gt; {\r\n\r\n\u00a0\u00a0dispatch({\r\n\r\n\u00a0\u00a0\u00a0\u00a0type: ADD_FAVORITE_ITEM,\r\n\r\n\u00a0\u00a0\u00a0\u00a0payload: movie,\r\n\r\n\u00a0\u00a0});\r\n\r\n};\r\n\r\nexport const removeFavorite = movie =&gt; dispatch =&gt; {\r\n\r\n\u00a0\u00a0dispatch({\r\n\r\n\u00a0\u00a0\u00a0\u00a0type: REMOVE_FAVORITE_ITEM,\r\n\r\n\u00a0\u00a0\u00a0\u00a0payload: movie,\r\n\r\n\u00a0\u00a0});\r\n\r\n};<\/pre>\n<p><span style=\"font-weight: 400;\">To access the favorites state, modify the moviesReducer in the reducers.js file.<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import {GET_MOVIES, ADD_FAVORITE_ITEM, REMOVE_FAVORITE_ITEM} from '.\/actions';\r\n\r\nconst initialState = {\r\n\r\n\u00a0\u00a0movies: [],\r\n\r\n\u00a0\u00a0favorites: [],\r\n\r\n};\r\n\r\nfunction moviesReducer(state = initialState, action) {\r\n\r\n\u00a0\u00a0switch (action.type) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0case GET_MOVIES:\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, movies: action.payload};\r\n\r\n\u00a0\u00a0\u00a0\u00a0case ADD_FAVORITE_ITEM:\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {...state, favorites: [...state.favorites, action.payload]};\r\n\r\n\u00a0\u00a0\u00a0\u00a0case REMOVE_FAVORITE_ITEM:\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...state,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0favorites: state.favorites.filter(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0movie =&gt; movie.id !== action.payload.id,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\r\n\u00a0\u00a0\u00a0\u00a0default:\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return state;\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\nexport default moviesReducer;<\/pre>\n<p>Send the below commands to add or delete a selection from your list of favorites. The favorites array in the state serves as a representation of this favorites list:<\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">\/\/ Update the following line\r\n\r\nimport {getMovies, addFavorite, removeFavorite} from\r\n\r\n'..\/redux\/actions';<\/pre>\n<p><span style=\"font-weight: 400;\">To access the favourites state, modify the following line:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">const {movies, favorites} = useSelector(state =&gt;\r\n\r\nstate.moviesReducer);<\/pre>\n<p><span style=\"font-weight: 400;\">Send the below commands to add or delete a selection from your list of favorites. The favorites array in the state serves as a representation of this favorites list:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">\/\/\u00a0 after fetch movies dispatch function, add:\r\n\r\nconst addToFavorites = movie =&gt; dispatch(addFavorite(movie));\r\n\r\nconst removeFromFavorites = movie =&gt; dispatch(removeFavorite(movie));\r\n\r\nconst handleAddFavorite = movie =&gt; {\r\n\r\n\u00a0\u00a0addToFavorites(movie);\r\n\r\n};\r\n\r\nconst handleRemoveFavorite = movie =&gt; {\r\n\r\n\u00a0\u00a0removeFromFavorites(movie);\r\n\r\n};<\/pre>\n<p><span style=\"font-weight: 400;\">To dynamically alter the UI based on the aforementioned triggered activities, let&#8217;s develop another handler function. This function will determine whether a movie item is included in the favorites array and, if so, whether to update the user interface (UI). We want to replace the outline that appears when a user adds anything to their favorite list with a solid favorite button.<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">const exists = movie =&gt; {\r\n\r\n\u00a0\u00a0if (favorites.filter(item =&gt; item.id === movie.id).length &gt; 0) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return true;\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0return false;\r\n\r\n};<\/pre>\n<p><span style=\"font-weight: 400;\">Modify the TouchableOpacity button:\u00a0<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">&lt;TouchableOpacity\r\n\r\n\u00a0\u00a0onPress={() =&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0exists(item) ? handleRemoveFavorite(item) : handleAddFavorite(item)\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\/\/ other props remain the same\r\n\r\n&gt;\r\n\r\n\u00a0\u00a0&lt;MaterialIcons\r\n\r\n\u00a0\u00a0\u00a0\u00a0color=\"orange\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0size={32}\r\n\r\n\u00a0\u00a0\u00a0\u00a0name={exists(item) ? 'favorite' : 'favorite-outline'}\r\n\r\n\u00a0\u00a0\/&gt;\r\n\r\n&lt;\/TouchableOpacity&gt;<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"9-Display-favorites\"><\/span><span style=\"font-weight: 400;\">9. Display favorites\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The Favorites tab will also show any movie item that is added to the list of favourites. Open the Favorites.js file in order to accomplish this, and then begin by importing the following statements:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true\">import React from 'react';\r\n\r\nimport {Text, View, FlatList, TouchableOpacity, Image} from 'react-native';\r\n\r\nimport {useSelector, useDispatch} from 'react-redux';\r\n\r\nimport MaterialIcons from 'react-native-vector-icons\/MaterialIcons';\r\n\r\nimport {removeFavorite} from '..\/redux\/actions';<\/pre>\n<p><span style=\"font-weight: 400;\">Let&#8217;s retrieve the favorites array from the state using the useSelector hook as the Favorites screen will only display the list of things that are added.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">making use of<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The action to delete an item from the list will be started by the dispatch hook. An item is no longer displayed on this screen after being deleted from the favorites list.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We can provide a placeholder message if there are no items to display, or, to put it another way if the favorites array from the state is empty.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Integrate the following code snippet to the Favorites element:<\/span><\/p>\n<pre class=\"theme:powershell font-size:14 height-set:true height:250 nums:false lang:default decode:true \">const removeFromFavorites = movie =&gt; dispatch(removeFavorite(movie));\r\n\r\n\u00a0\u00a0const handleRemoveFavorite = movie =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0removeFromFavorites(movie);\r\n\r\n\u00a0\u00a0};\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;View style={{flex: 1, marginTop: 44, paddingHorizontal: 20}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={{fontSize: 22}}&gt;Favorites&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style={{flex: 1, marginTop: 8}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{favorites.length === 0 ? (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={{color: '#010101', fontSize: 18}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Add a movie to the list.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) : (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;FlatList\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data={favorites}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0keyExtractor={item =&gt; item.id.toString()}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0showsVerticalScrollIndicator={false}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderItem={({item}) =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const IMAGE_URL =\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'https:\/\/image.tmdb.org\/t\/p\/w185' + item.poster_path;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style={{marginVertical: 12}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style={{flexDirection: 'row', flex: 1}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Image\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0source={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri: IMAGE_URL,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resizeMode=\"cover\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{width: 100, height: 150, borderRadius: 10}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View style={{flex: 1, marginLeft: 12}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={{fontSize: 22, paddingRight: 16}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{item.title}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flexDirection: 'row',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0marginTop: 10,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alignItems: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;MaterialIcons\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color=\"green\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"thumb-up\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size={32}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fontSize: 18,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0paddingLeft: 10,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: '#64676D',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{item.vote_count}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;TouchableOpacity\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress={() =&gt; handleRemoveFavorite(item)}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0activeOpacity={0.7}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0marginLeft: 14,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flexDirection: 'row',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 2,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0borderRadius: 20,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alignItems: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0justifyContent: 'center',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 40,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 40,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;MaterialIcons\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color=\"orange\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size={32}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=\"favorite\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/TouchableOpacity&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n};\r\n\r\nexport default Favorites;<\/pre>\n<p><span style=\"font-weight: 400;\">The Movies screen&#8217;s UI elements are the same. After this stage, the following is the result:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-5832 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/favorites-component-display.gif\" alt=\"\" width=\"285\" height=\"593\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/blog.logrocket.com\/comprehensive-guide-to-using-redux-in-react-native\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Image reference<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Over-to-you\"><\/span><span style=\"font-weight: 400;\">Over to you<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When employing several components, using Redux&#8217;s store method to save all of your application&#8217;s information in a global object may cause performance problems.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yet, in the realm of React Native, there isn&#8217;t a single answer to all of these issues. It boils down to whether parts of the app&#8217;s state should be shared throughout components and which components should remain local. State in a function component is easy to comprehend and utilize when Redux is used with hooks.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">DianApps is a <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native app development company<\/b><\/a> <span style=\"font-weight: 400;\">that provides an extensive monitoring tool that enables you to prioritize defects, quickly recreate issues, and analyze performance in your React Native applications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By displaying precisely how people are interacting with your app, our React Native app developers also assist you in boosting conversion rates and product utilization.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Start to proactively monitor your React Native apps with us today!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The official documentation for advanced Redux can be found <\/span><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There must be times when you encountered a large number of components to manage the state internally in your React Native application.\u00a0 Components that internally handle state are used to create React Native apps. The built-in state management of React Native app development is effective for apps with few components and no plans to grow [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5833,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[104,56],"class_list":["post-5809","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native","tag-react-native-app-development"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/redux-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/redux-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/redux-300x169.png",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/redux.png",2048,1152,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Role Of Redux In React Native App Development<\/title>\n<meta name=\"description\" content=\"Finding it difficult to manage all your state internally in React Native? Not any more. The role of Redux helps you address everything at one place in your react native app. Read here to get every detail!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Role Of Redux In React Native App Development\" \/>\n<meta property=\"og:description\" content=\"Finding it difficult to manage all your state internally in React Native? Not any more. The role of Redux helps you address everything at one place in your react native app. Read here to get every detail!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-21T10:55:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/redux.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1152\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Role Of Redux In React Native App Development","description":"Finding it difficult to manage all your state internally in React Native? Not any more. The role of Redux helps you address everything at one place in your react native app. Read here to get every detail!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/","og_locale":"en_US","og_type":"article","og_title":"The Role Of Redux In React Native App Development","og_description":"Finding it difficult to manage all your state internally in React Native? Not any more. The role of Redux helps you address everything at one place in your react native app. Read here to get every detail!","og_url":"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-03-21T10:55:25+00:00","og_image":[{"width":2048,"height":1152,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/03\/redux.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/","url":"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/","name":"The Role Of Redux In React Native App Development","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-03-21T10:55:25+00:00","dateModified":"2023-03-21T10:55:25+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Finding it difficult to manage all your state internally in React Native? Not any more. The role of Redux helps you address everything at one place in your react native app. Read here to get every detail!","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/the-role-of-redux-in-react-native-app-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Role Of Redux In React Native App Development"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=5809"}],"version-history":[{"count":17,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5809\/revisions"}],"predecessor-version":[{"id":5834,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5809\/revisions\/5834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/5833"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=5809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=5809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=5809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}