I've read/watch several guides/tutorials for ReactJs with Redux about how to use it to fetch data and show it in the screen. The basic are:
const DataView = () => {
const dispatch = useDispatch();
const {data} = useSelector(data => data);
useEffect(() => {
dispatch(getData());
}, []);
return (
// show data
);
};
This works just fine. The data fetch is done and the data is shown correctly.
But what if this data is sensible and not other people should be able to see it? If I enter to this screen the very first time, "data" will be empty. No problem here. useEffect will do the data fetch, and when it's done, the information is shown.
Now, what if I go to another page, and then came back there. Because "data" is not empty anymore I will be showing old data until the fetch is completed again. This is not a problem because I'm with the same user.
What if that user logs out, and another one logs in? If the new user enter to this page I will be showing the other user information until the fetch is completed (this could take several seconds).
I'm thinking several options to "fix" this but I'm not sure which one is the correct one:
Store the information in the reducers linked to the user session.
Call axios directly to fetch the data to avoid showing old data from the axios reducers.
Clear reducers information after a login/logout
Any blogpost / video / book that explain this cases would be welcomed! thanks!