In my app, I'm storing all my users in the state, like this:
Store = { users: []
}I'm trying to figure out what would be the best approach for telling a component if this user is loaded in or not.
Right now, my process goes like this:
Action called to fetch user > Save empty placeholder user with username or id > Get actual user from API > Replace placeholder with user by username or id
Now, this works really well. I'm simply replacing already existing objects by id or username, so I can easily replace it again and again, and React will just update the changed info.
My issue is that I have no idea what my approach to this would be in case for some reason a user failed to load, I've thought about doing it like this:
user: { status: 'error' // Can be fetching or complete, ...
}My issue with this is that if I'm updating a user that already exists, it will set the status to fetching, and whatever component that is showing this user will show a loading circle instead, while it could show the cached user instead.
So then I thought about setting a "exists" flag, to tell the component that it's ok to show this user, it's already loaded in.
user: { status: 'fetching', exists: true, ...
}I really dislike this approach, and do think there is a better more easier way, but I have no idea how. I want to make my app as clean and scalable as possible.