CODEWITHSUNDEEP
javascriptreactjsauthenticationredux
Eric
Eric

Reputation: 1603

Common ways to store fetched data for a React app?

I'm working on a React web app where a user can create an account, which would contain the user's contact info (phone, email, address). When a user signs in, their account info should be accessible to them.

How is this information typically acquired/stored on the client side in React? Here's what I'm thinking:

  1. Once the user logs in, the application fetches the user's account info (using the fetch API, for instance)
  2. That account info can then be saved in the app's state, perhaps using Redux.

Is it up to the app to fetch the account info after login, or is it up to the server to automatically send that data to the client? And is Redux an appropriate tool for storing this sort of data, or is this something that localStorage is supposed to handle?

Upvotes: 1

Views: 1001

Answers (2)

Sandeep Amarnath
Sandeep Amarnath

Reputation: 6917

The data fetching happens on the client side (React). You generally keep track if the user signed in or not in your local state or redux. Let's say you're using firebase as your backend service then the method below (generally should be placed inside the component which requires user authentication info ) automatically keeps track of auth status change.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {    // you can pass this info to local state or redux
    // User is signed in. 
  } else {
    // No user is signed in.
  }
});

https://firebase.google.com/docs/auth/web/manage-users

One way to tackle your case is that, once you get the user info from the backend, you store that in the local state or send it to action creator to store in redux.

Resource: https://blog.logrocket.com/getting-started-react-redux-firebase/

Upvotes: 1

anon
anon

Reputation: 816

Is it up to the app to fetch the account info after login, or is it up to the server to automatically send that data to the client?

Yes the app should fetch this after logging in.

is Redux an appropriate tool for storing this sort of data, or is this something that localStorage is supposed to handle?

Yes definitely Redux instead of localStorage, or just use react's global state management.

Upvotes: 1

Related Questions