For 3 months I have been learning about React-Redux. Really Redux is very good idea. While I am reviewing about the redux, I got my opinion that Redux seems to be a global variable which is defined as STORE. So on React-Redux application, every component, every custom hooks and others can access the global variable STORE to get and set.
By this thought, I believe that I can reduce the Ajax calling times.
For example, Let’s suppose that there are 2 pages such as users page and rooms page.
users page will display the user list, and rooms page will display the user list in each rooms.
users page (One ajax calling)
#1. getting the user list
rooms page(Two ajax calling)
#1 getting the user list
#2 getting the room list with room-user relation infos
before, whenever the page is loaded (componentDidMount), I made the users page and rooms page to call the ajax for getting the data.
But I would like to call the ajax only one time with Redux. So at only the first time of page load, the ajax call will work.
I think that it is possible with Redux, because Redux store is working as a global variable.
But I have a problem with this idea. The problem is Data sync.
Let’s suppose there are 2 admin users (Admin#1, Admin#2) who can edit the server data.
Now I logged in with Admin#1, and I visited the users page and rooms page. So the user data and room data will save on the Redux Store. After that, the ajax call never need for users and rooms data.
But at this time, Admin#2 added/deleted some of users.
At this case, how can Admin#1 get the synced data?
I think that the websocket seems to be good solution. But websocket function for the whole web app is very difficult.
So what is the best solution for my problem?
I think you can try socketio. When a client delete/add new user, it will broadcast an event to other clients (webapp). You just have to implement a static socketIO client and exports all important functions (also think about callback too) so that you can import and use them in your components
Related
I want to build a system that implements the features of Gmail, the database is firebase firestore.
I have a conversations component which contains a list of contacts queried from Firestore. Then I have multiple conversation components (children of the conversations component) which has a realtime Firestone listener for the messages of the conversation.
So the structure is this: conversations->conversation
My question is this one: how can I keep the listeners alive along with the data, even when the user navigates to a different page on the same website.
I tried using a global context containing all the listeners (can add up to a lot!) and data in one state. The problem with this is that all the components (conversation) refresh when just one new message comes in!
Is there a way of keeping components alive forever ? Is there a way of generating separate global contexts depending on the number of conversations ?
Is even possible to find a solution to this problem ? (I've been burning my mind trying to find a solution!)
thanks a lot🙏.
I've taken the program at Udacity for react and react native, and it taught me well id say.
Now that I am equipped with the skills and have a good knowledge of the environment and redux etc. Im trying to build my first test app that handles data living remotely.
In the React tutorials we would use local mock data, and try to fetch it and even simulating the delay with a setTimeout call. But the problem is the tutorials worked excellent only for the types of apps they were building. I'll get to this in a bit...
My app description:
At the moment i'm making a test app and so far I can : retrieve a collection of food items ( remote data), render the data, and press "LIKE" on anyone. After pressing Like that food item URL gets saved into another remote file under the authedUser's account under a "favorites" property.
The food data at the moment is in a json file hosted on a github repository.
and so is the users account data.
The thing I noticed in the react course was, Data would be received into the redux store.
from there anytime you dispatched an action which involved data changes like "Favoriting" something, the app would first dispatch an action to server. Once that resolves it would dispatch to the redux store and affect it there.
Now from what I understand... this is a way to keep the data in sync? Is this how other applications do it? or is it when data is changed, you only dispatch the change to the server, and request/fetch the new data into redux once the action resolves? The tutorials would receive the initial data, and like this it would be set and stone and then rely on the dispatches to keep it in sync. would it be better to simply use local state, fetch the data we want. vs using the store?
Im not exactly sure whats best, but to me the idea of receiving the entire data file into the app seems not scalable? like when you use instagram for example, your phone doesn't download the entire instagram database. Im thinking it downloads only your profile? and url's to your friends? etc?
so for this test app that I am trying to make ( described in italic font above ^ )
I'm not sure how to go about it. I definitely don't think its appropriate to receive the entire data file. I know that I want the user to receive food items onto the screen, but only a handful at a time, maybe through a search it modifies the results on screen. then the user can like a food item.
This is the first time i'm working on an application of this sort, and I do think i'm missing something.
It would be a good idea to not integrate Redux at first. Just build the application in plain React.
Now talking about your app. As you said, is a bad idea to download the entire database. When you have to fetch a lot of data a common pattern is to use pagination. It works like this: your app asks for 10 food items. The server returns those 10 and tells you that there is more data and you should make another request if you want to fetch more. It doesn't make sense to fetch 1000 products if the user can see only 10 at a time, right ?
Let's say you like a food item. After you press "like" it is not enough to update your app state, you also need to make the change on the server. How you do this ? Usually you have a food item id(let's say 123) and you maybe you make a POST to https://server.com/like/123. Now that request may fail for various reasons and the server will not register your like. This is way you update the local state only after you successfully updated in the database. In addition you may want to update the number of the likes(maybe other users liked that food item since you fetch) so the server will return the updated number of likes.
Where does Redux fit here ? In React every component has its own state. They can share data between them using props. But this doesn't scale and you will usually end up in a situation called Prop Drilling. Redux store is some kind of global state. For instance:
<FoodItems>
<FoodItem key=1/>
<FoodItem key=2/>
</FoodItems>
Let's say somehow you update the description for the first FoodItem. How do you tell that to other components ? In Redux you dispatch an action and modify the store. Now other components can connect to the store and get the value from there.
Imagine a React app where you can list your friends in a sidebar. The site uses Redux to store the state of the friends. In case a user adds a new friend to his list, I have to send a POST to the backend, to save it.
The question is, how should I update the list of friends in the sidebar?
After the post, should I make a GET request and add the response to Redux or should I just use the data and add it directly to Redux, removing the extra GET call?
My suggestion will be doing both. When you are making a request to server update the Redux store which will update your state(Friends list) and will rerender the component.
Also fire the GET request action, so that if there are data that are on the server but not in your redux, that should get retrieved.
(imagine: Using two machine at the same time and adding friends)
And if you are using something similar to a pure component, if your redux store and retrieved data are same, i.e., no new data was available on the server, there will be no change in state and component will not re-render. They will re-render only when there is a difference in state and will display the current list.
IMO both options are valid. However, I like to have a single source of truth in our applications, which is the backend in most cases.
Sometimes, you might even choose to go for both options. This will increase the user experience by preventing a loading state, but if the action fails or the backend data is different than your redux store, it can result in "weird" behavior.
I want to fetch all the data needed to display the dashboard of my app in react-native. The app is similar to the facebook one
I am using react-native, redux, redux-saga, react-navigation and a REST api.
I have to fetch the post list to display the main page and the notification count for the headerBar. The other tabs pages are mounted at the same time as the main one to allow fluid transition. So I need the current user too for the Account page
Finally, the store is persisted and the app can stay in background mode for a long time. So I need to refresh my data often to be sure to have the last changes.
I have sagas which make the call and launch actions to update the store.
Here the strategies I found :
I can connect each page component and give them a fetchAllPageData() which dispatch a fetch action that I call in componentDidMount
I can connect smaller components to allow them to pull the data they need with the same strategy (ie. fetchUser to the component that display the user in the Account Page, fetchNotificationCount to the component that display the number of notifications ...)
I can use create a redux-middleware which listen for page change and call all fetch data actions.
I am currently using a mix of the first and second solutions but I am not very happy with it :
I don't always know where the data are fetched
The strategies which refresh the data once the component is mounted are a bit "hacky" and random
I often have the to move where the call is done when refactoring
What is the state of the art on this subject? What is your recommendation?
The usual recommendation is to intercept actions that make AJAX requests in the middleware and resolve them there before passing the result through.
This article explains it in more depth.
You can / should do in componentDidMount or componentWillMount.
I'm learning React and Flux and there's something that bothers me about all the examples I've seen so far.
They all are pretty much a CRUD UI.
In them, they always fetch all the data after every change (update/add/delete etc.)
So let's say, we have a todo app, and the user added a new todo item.
In a response, the store will get an action, call some API in the server to add the item and then fetch all the items again.
Isn't that expensive?
I understand why it makes things simpler which is good. But, why not add the item to the store's state. I understand this makes it so you always have the keep the store and the data in the server synced like that but it's not as expensive.
One solution I saw was pagination but in the example they would still get all the items for the new page every time a user changes it.
Why always fetch all the data?
If we use pagination - would we get the new page from the server every time a user changes pages?
It is not necessary to get data after every change. In the apps that I have built, I have always changed the store rather than get all data.
In only one project which involved DreamFactory API, we used to refresh the model (only that model/item) after an update. That was necessary because DreamFactory API pulls all the related data in a single call.