Search⌘ K
AI Features
Home
Courses
Simplifying State Management in React Native

Combining Various Pieces of Global State

Explore how to combine different pieces of global state in a React Native app using Redux Toolkit. Learn to configure the store with reducers, wrap the app with the Redux Provider, and replace context-based data with Redux-managed state. Understand the key steps to set up actions, dispatch them, and manage global data effectively for consistent state synchronization.

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:

Javascript (babel-node)
// ./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 ...