Simplifying State Management in React Native/

...

/

Combining Various Pieces of Global State

Combining Various Pieces of Global State

Learn setting up Redux store in React Native using Redux Toolkit, covering reducer config, React integration with Provider, and resolving unhandled action type error in likedImages reducer.

We'll cover the following...

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.

Using Redux Toolkit

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:

Press + to interact
// ./store.js
import { configureStore } from "@reduxjs/toolkit";
import usersReducer from "./reducers/users";
import likedImagesReducer from "./reducers/likedImages";
// Configure Redux store with users and likedImages reducers
export const store = configureStore({
  reducer: {
    user: usersReducer,
    likedImages: likedImagesReducer,
  },
});

In lines 7–11, the configureStore function combines 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 ...