CODEWITHSUNDEEP
reactjs
Yatrix
Yatrix

Reputation: 13805

How do I deal with app state in a multi-"page" application?

I'm having trouble envisioning application state.

For a multi-page application, should each page only load a chunk of the app state?

For example, let's say I have an app that manages my favorite things, books, movies, and games. Each one of those domains will have their own page to manage them. Is the idea that only portions of app state are loaded based on what's needed in the current context?

My app state would look something like this, conceptually. 

{
    currentUser: { id: 9, userName: 'JUtah' },
    books: {},
    movies: {},
    games: {}
}

However, if I browsed to Books Management, the app state would look like this:

{
    currentUser: { id: 9, userName: 'JUtah' },
    books: {
        1: { title: 'Kung Fu for Kittens', author: 'Dr. Meowrtin Kibble' }
    },
    movies: {},
    games: {}
}

If I browsed to Movie Management, this:

{
    currentUser: { id: 9, userName: 'JUtah' },
    books: {}
    },
    movies: {
        1: { title: 'John Wick', star: 'Keanu Reeves' }
    },
    games: {}
}

and so on.

Is this correct? I'm struggling to determine what app state holds at any given time.

Upvotes: 0

Views: 277

Answers (1)

devserkan
devserkan

Reputation: 17638

First of all, React's local state and Redux's global state are different things.

Let's assume you don't use Redux for the moment. State management is up to you totally. But, try to construct your components as pure as possible and use the state where do you really need it. For example, think about a favorites app as you said. The decision is, do you want to show all the favorites categories in the same UI? If yes, then you need to keep all of them in one place, in the App. Then you will pass those state pieces your other components: Book, Movie, etc. Book get the book part of your state for example. They won't have any state, your App does. Here, App is the container component, others are presentational ones or dumb ones.

Is your data really big? Then you will think about other solutions like not fetching all of them (from an API endpoint or from your DB) but fetch part by part then update your state when the client wants more.

But, if you don't plan to show all of them in one place, then you can let your components have their state maybe. Once the user goes to Book component, maybe you fetch only the book data then set its state according to that. As you can see there are pros and cons, in the first method you are doing one fetch and distributing your data to your components, in the second method you are doing multiple fetches. So, think about which one suits you.

I can see you removed the Redux tag, but with Redux you will have one global state in the store. Again, in one point you are doing some fetch then update your state. Then, you will connect your components when they need any data from the state. But again, you can have container/presentational components here, too. One container connects to your store then pass the data to your components. Or, you can connect multiple components to your store. As you examine the examples, you will see best practices about those.

If you are new don't think too much :) Just follow the official documentation, read or watch some good tutorials and try to write your app. When you realize you need to extract some component do it, then think about if you need any state there or not?

So, once the question is very broad then you get an answer which is too broad, some text blocks :) You can't see so many answers like that, because here we share our specific problems. Again, don't bloat yourself with so many thoughts. As you code, you will understand it better.

Upvotes: 2

Related Questions