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

Creating the Store

Explore how to create and set up a MobX store as the central source of truth in your React Native app. Learn to integrate MobX-State-Tree with React context, provide the store to your app using a Provider, and access state data within components. This lesson helps you manage state efficiently and prepare your app for scalable data handling.

We'll cover the following...

We will start with setting up a store; this will be the source of truth for the app. But before adding and removing images, there’s one more step we need to take. We need to hook up the store!

Creating an empty store

Let’s go to our store.js file and tell it to use the User and LikedImages models. We’ll start by importing all the necessary files and creating an empty store:

TypeScript 3.3.4
// ./store.js
import { types, flow, applySnapshot } from "mobx-state-tree"
import { LikedImages } from "./src/models/LikedImages";
import { User } from './src/models/User';
// Define the root store model, including users and likedImages
const RootStore = types
    .model({
        users: User,
        likedImages: LikedImages
    })
// Create an instance of the RootStore with initial data
export const store = RootStore.create({
    users: {},          // Placeholder for user data
    likedImages: {}     // Placeholder for liked images data
})
// Add comments as needed to describe the purpose and structure of the code

  • We import the two models ImportImages and User on lines ...