Simplifying State Management in React Native/

...

/

Redux Core Concepts

Redux Core Concepts

Learn how Redux manages the global state in an application using store, reducers, and actions.

We'll cover the following...

The main concept, and the absolute most important one, is that with Redux, we consider the state a plain object. The Redux documentation uses a to-do app as an example, but we can go ahead and use our Funbook app.

Showing state with a single object

If we were to represent the state of the logged-in user of the Funbook app with a single object, it would look something like this:

Press + to interact
{
    userLoggedIn: true,
    userData: {
        id: 3,
        name: "John Doe",
        email: "john@doe.com",
        image: "imageURL",
        addedImages: [...],
        likedImages: [...],
        numberOfPosts: 35,
        numberOfFollowers: 1552,
        numberOfFollows: 128,
        idsOfFollowedUsers: [...],
        idsOfConversations: [...]
    }, 
}

In this example, we are trying to figure out holistically what user data will be necessary for the entire app. This is what is considered the global state. We are not going surface to surface; we want to know all the data relevant to the user. Therefore, in the userData object here:

  • We will find data such as the name and email on lines 5–6, which will be used on the “Profile” surface. ...