Simplifying State Management in React Native by Aleksandra Desmurs-Linczewska
Author:Aleksandra Desmurs-Linczewska
Language: eng
Format: epub
Publisher: Packt
Published: 2023-11-15T00:00:00+00:00
Combining various pieces of global state
We have two reducers, each one meant to manage two different actions. What we need to do now is create a store that will represent the global state of the Funbook app and pass actions into reducers. We could use the createStore function from core Redux, but that would require adding more boilerplate files and functions, and it is not the recommended approach for modern Redux. The recommended approach is using Redux Toolkit, which we will do right now. Redux Toolkit offers a special configureStore function, which will do a lot of heavy lifting for us. All we need to do is add this function:
// ./store.js import { configureStore } from "@reduxjs/toolkit"; import usersReducer from "./reducers/users"; import likedImagesReducer from "./reducers/likedImages"; export const store = configureStore({ reducer: { user: usersReducer, likedImages: likedImagesReducer, }, });
The configureStore function combined our two reducers for us, creating a root reducer required by Redux. This single root reducer is required to achieve a single source of truth in the app. This function also adds some useful middleware functionalities, which will check for common mistakes and expose our code for easier debugging.
We created the global state, and we configured it with the reducers thanks to Redux Toolkit. Now, we need to tell our Funbook app to use this state. In order to do so, we will use a <Provider> component wrapper provided (no pun intended) by the Redux library. If you paid attention while we were setting up the app without any exterior libraries, you will have noticed that the React context also uses <Provider> components. The naming convention is not an accident. Both <Provider> components serve the same purpose and React context uses a lot of the same high-level logic as Redux.
Letâs import the necessary elements into our main app file, App.js:
import { store } from "./store"; import { Provider } from "react-redux";
And letâs wrap our app in the Redux <Provider>:
export default function App() { //⦠return ( <SafeAreaProvider> <Provider store={store}> //â¦
This looks familiar, doesnât it? Reduxâs <Provider> shares a lot of similarities with Reactâs context. I cannot give you any links to official blog posts from the Meta team where React maintainers officially explain this. I can, however, give you my personal opinion that the React team saw the solution that Redux was bringing to large React apps and thought that some of its principles were worth importing into the React repository itself. There are other state management solutions out there, obviously. If there werenât, I wouldnât be able to write this book! Regardless, Redux holds a special place in the React ecosystem.
After this short break, we will dive back into our code! We have our store and Provider set up. We also have two reducers ready: for user data and liked images data. Letâs start with replacing the liked images. Weâll go into the surfaces folder, where we will find the Favorited surface. This, in turn, will lead us to the component named ListOfFavorites, which displays data from the Favorited context.
Download
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
Building Blazor WebAssembly Applications with gRPC by Václav Pekárek(3745)
Hands-On Application Development with PyCharm by Bruce M. Van Horn II Quan Nguyen(2198)
Designing Web APIs with Strapi: Get started with the Strapi headless CMS by building a complete learning management system API by Khalid Elshafie Mozafar Haider(1055)
Django 4 for the Impatient. Learn the core concepts of Python web development with Django in one weekend by G. Lim D. Correa(912)
Accelerating Server-Side Development with Fastify by Manuel Spigolon & Maksim Sinik & Matteo Collina(855)
Vue.js 3 Design Patterns and Best Practices by Pablo David Garaguso(854)
Drupal 10 Module Development - Fourth Edition by Daniel Sipos(767)
Mastering CSS Grid by Thormeier Pascal;(734)
Going the Distance with Babylon.js: Building extensible, maintainable, and attractive browser-based interactive applications using JavaScript by Josh Elster(703)
Simplifying State Management in React Native by Aleksandra Desmurs-Linczewska(621)
Java Memory Management by Maaike van Putten & Seán Kennedy(553)
Hands-On Application Development with Pycharm by II Bruce M. Van Horn;Nguyen Quan;(537)
Joomla!® Explained: Your Step-by-Step Guide (Joanne Romanovich's Library) by Stephen Burge(324)
Python & JavaScript Mastery: 2 Books In 1- Learn And Master Two Powerful Programming Languages by Alex iversion(314)
Beginning Modern JavaScript: A Step-By-Step Gentle Guide to Learn JavaScript for Beginners (Code With Nathan) by Sebhastian Nathan(263)
Understanding JavaScript Promises by Nicholas C. Zakas(253)
Programming With Java by Edet Theophilus(251)
Create GUI Applications with Python & Qt6: The hands-on guide to making apps with Python by Martin Fitzpatrick(249)
NextJS 13 and React Crash Course: Build a Full Stack NextJS 13 App with React, Tailwind and Prisma backend by Lim Greg(238)
