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

Deriving Data from State

Explore how to derive data from state in a React Native app using MobX. Learn to create views in your store model to track liked images dynamically, avoid duplication, and update UI components like heart icons efficiently without complex side effects or useEffect hooks.

We'll cover the following...

We’ve mentioned the fact that MobX’s authors state that anything that can be derived from state should be. We’ll get a chance to derive some data now.

View for the store model

We would like to know which images are liked and which are not so that we can successfully add them to the list of liked images or avoid duplicating them. Deriving data from the state is done on the data models through views. We’ve decided to add the following view to the store because we are working in a constrained environment, and we want to keep things simple.

Here’s the view that we have added to the RootStore model:

Javascript (babel-node)
// Adding a view to the RootStore model to determine if an image is liked
const RootStore = types
  //... (previous code)
  .views(self => ({
    // Method to check if an image with a given itemId is liked
    getIsImageLiked(itemId) {
      // Filtering the likedImages to check if an image with the given itemId exists
      return values(self.likedImages?.imageList).filter(
        (favoritedImg) => favoritedImg.itemId === itemId
      ).length > 0;
    },
  }));

As with actions, we will notice the self ...