I am new to redux and I've just got my head around the architecture.
If we are keeping all our data inside a giant store, and that store is updated through actions which are all front end, what is the role of a back-end and database in a single page redux application?
Do you pull data into your store from a DB for example?
Typically, redux store is just for storing temporary state in memory within browser. Back-end database is used to populate that Redux state. DB also can persist whole state of your application, where Redux store can't store full state of your application, because of memory constraints of the machine the browser is running on. DB is also needed to populate same state across different browsers/users of your application.
Said that there might be esoteric usages of Redux, e.g. on back-end or in browser with usage of WebRTC, where back-end database might not be needed.
Related
I am creating a simple chat app using react and node js. When using socket to establish a connection between server and client, I was wondering the point of using this package. Since react re-renders the page upon state change, I can fetch messages from my database and change the state, allowing for a presumably seamless chat application. Will there be any problems with such a chat application, where the chats would be displayed by fetching data from the database? Adding a new message would again update the database and the data would be fetched. So, the page would update with the new chat being displayed as it has been re-rendered due to change of state. So what is the need for socket in such an application ?
You could build what you describe without socket.io. Socket.io simply allows the messages to be delivered in real-time using websockets and a few other technologies so you don't have to build long-polling.
Said in a different way, when you fetch data from the database, you'll have react perform an API call and fetch new messages from a node.js API endpoint. This API call will need to be performed on a very short interval to make it feel like messages are showing up in real time.
This is one of many situations in programming where you could totally write something yourself, but there are industrial grade solutions that will help speed up your development.
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
I am writing a vue spa with vue ssr.
According to the office guide, data in component will be prefetch server side and store in a vuex store.
This seems complicated. So i want to know is there any possible way to fetch data, which can keep data just in a component itself? No need a vuex store or any other third party storage.
Yes there is.
You can do whatever you want in each component's own mounted/created/etc. hooks. This would most likely be an appropriate place to fetch data from the network and then display it to the user. You would probably show a loading spinner by default and disable it when the data arrives. You would store the received data in the component's local data.
Without Vuex or other state management solutions and only using components, however, the fetched data will be local to your component. Thus switching out the component loses the data and will require a new network fetch and so on.
I am working in a large React App. In my top level parent component, I am adding some info (user data from login service) to local storage through a Flux action dispatch. Once that action has dispatched, the rest of the app is rendered but the visibility of some components is dependent on the status of that data in local storage (i.e. user read permission). Note that this is all validated on the server-side as well when I query to collect the data to populate these components, I just want to render them in the most efficient way.
Since these components are not attempted to be rendered until after the Action that adds the permission data has been dispatched can I assume that the permission data will be available to read from local storage in the constructor/componentWillMount of the child components? Or do I need to handle potential latency between writing to local storage and reading from it?
Edit:
As per the comment below, I can store my user permissions in the Store instead which resolves that issue.
However, I also get a URI for an API from the login service that may change depending on the user. This URI is used for ajax calls in functions that are called by actions dispatched when the child components are mounted. Since this is a static entity, not a component of state, local storage seems like the better place to hold this over the store. So the latency question above still stands for this aspect, is it safe to assume that as soon as the child component mounts and the ajax call is triggered the URI will be available to read from local storage? Or do I need to handle potential latency.
Calls to localstorage are synchronous, so you can safely assume that if you set a value in localstorage, it will have completed before future lines of code are executed.
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.