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

Copyright Disclaimer:
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.