We Keep Coding

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:
Once the user logs in, the application fetches the user's account
info (using the fetch API, for instance)
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?

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/

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.

storing logged user data from front-end

I'm using angularjs to front-end and laravel framework to back-end. my database is Mysql.
I need to store all user's logs. Since I don't want to store user's logs inside mysql I chose MongoDB.
now I don't want to use laravel to store user's logs,Instead, I want to use nodejs.
At a glance:
laravel - mysql : to store data
nodejs - mongoDB : to store user's logs
My question,
I want to send user's logs from angularjs to nodejs and storing them inside mongoDB.
I think most systems stores user's logs from server-side(here laravel to mongodb or mysql),but I send user's logs from front-end to nodejs to storing logs. of course the connection between angularjs and nodejs has a hashing method.
What are the advantages and disadvantages of this method?

I have built a framework that logs all kinds of user actions from the front end JS app to an ajax call. For performance reasons it is based on asynchronous evenrs and buffers actions until some number are queued (generally 10) or a window close event. This data is stored in a back end database (ours is a fixed SQL schema so we have normalized all logs to a specific format).
We have found this a very good debugging and auditing tool. It does consume a modest amount of bandwidth and we only have a few hundred simultaneous users, but I would think with a good server design it could scale well (we use two sets of servers in two data centers).
It does help to classify the "actions" so we have some nav actions for focus changes, some api actions for other ajax calls, error logs for anything unusual, some input actions for form data edits, etc. We always log a session id, the user id, timestamp, etc. Best part is the framework does it all and the app writer does not need to think about it unless they explicitly want to call a logging function.
Your mileage will vary based on your requirements/environment, but it works very well for us.

Invalidating/Refreshing the Redux store in a React web app?

We are in the middle of migrating a fairly complex web app over to a React/Redux architecture.
One major design question i have not been able to find an answer for, is how is data stored in redux supposed to be 'refreshed'?
For example, say i load a list of items at a route like /items. Now the user wants to view a specific item and goes to /items/<id>.
The flow, as i understand should work something like, on the /items request, we make a API request and store all our items in the redux store. When a user clicks on a specific item, we pick out that specific item from our redux store, not needing to make a new API request as we already have the data.
This is all fine & well. But the question then, is what is the correct pattern for 'invalidating' this data?
Say, the user loads the list of items and walks away from there computer for a few hours. Now the list of items is theoretically out of date with the server.
How does one then, go about keeping the store up to date with the server?

You could use one of the following:
1) short polling (i.e. polling your server once in a while and update the store items)
2) long polling (you open connection, keep it until the data on the server changes, the server then sends you the new data and closes the connection, you reopen it etc...)
3) live updates with websockets, which provide bidirectional communication (this means the server can push data to the client)

Is it when the state changes, react will automatically rerender the component, this might not what you want, but what do you mean by the correct pattern for 'invalidating' this data? like 30 minute it will dispatch an action checkout the state change?

Firebase and redux? Save received data in redux store

I'm having a problem with saving the data received from the firebase.
When I was fetching the data from backend with native http calls (I was using redux/redux saga for it) the data was stored correctly in the storage, so if user entered some other component and returned back to the listed data, there was no need to fetch the data once again from the server. It was saved inside redux store.
But since Im using firebase, if user navigates over my application and returns to the component which lists some data from the server, the same data is fetched every time. This is a huge issue.
Q: Is there some way to store the data received from firebase call in redux store?
Of course, I don't want to loose the real-time database. This is a pure awesomeness, that user doesn't have to reload the page to update the content.
Looking forward for any hint or suggestions. Maybe I don't even need redux for it? Maybe firebase provides some mechanism to deal with it? Thank u!

Found an outstanding library recently, which solves cases included in my question. If anyone would ask for same thing in the future, here's the library:
https://github.com/prescottprue/react-redux-firebase

What middleware can i use to store data in React Application?

I've developed a React Application that has form where users can update their Birthdate along with their ID. All my team members would be able to access the Application through http://<IP Address>/3000 When each person updates the form the data should to stored in my Local machine.
How can i achieve this?

You cannot handle this in the client side, because you do not have a mutual state that is shared amongst you and your friends.
One possible solution, given your requirements, is to use a global data structure that you can put somewhere in the backend of your react app. This is so that your friend would be able to access the same data as you. There are a number of ways you can do this, depending on how you set up your react application. What I would do is set up 2 RESTful endpoints in your react project's backend. So, something like:
GET /data
POST /data
In the handler of both endpoints you'd be able to access the data that you declared. Now, each time you want to update your shared data, just make a network request to the above endpoints.