I am loading 10 items per page from API and storing the data in redux
suppose I scroll 3 pages so in my redux there are 30 elements 10 elements on page 1 10 on page 2 10 on page 3.
Now I go to the next screen and return to the pagination screen again. My page 1 is again called and in the redux, there is duplication of elements because page 1 elements are already in the redux,
So, should I clear the redux before going to the next screen? So it again starts with page 1
It depends on what you want, so here you go 2 solutions:
1- If you want to keep your data:
Add the pagination logic in your redux code, that way if you reach page 3, in redux the page will be updated to 3, therefore, when you come back to the screen the page will go on from 3 .
A good way to implement the paging logic in redux, is by adding a +1 to the page value in redux state whenever you receive a response:
return {
...state,
data:[...state.data,...data]
page:data.length >0? state.page+1:state.page
}
2- If you are using the same redux for different screens or you want to clear it (which I don't recommend):
Then definitely you will have to clear all your redux data while leaving the screen.
If you have any question, Let me know and good luck!
I suggest you keep another key inside the redux to track the last searched page index.
Initially, it would be something like {lastSearchedPageIndex: 0, items: []}.
When you opened the page for the first time, you would make an API call with the page parameter as 0. You would get a successful response from the API and now the state of redux has to be {lastSearchedPageIndex: 0, items: [SOME_ITEMS_OF_PAGE_0]}.
When you scroll up and reach the page end, you would make another API call. But here you have to make sure that you would only call the API if the page is not searched before. The condition should be if(currentPage > lastSearchedPageIndex) { MAKE_AN_API_CALL_WITH_PAGE_1 } where currentPage is the page number you are searching for. Once you get the response the redux state would be {lastSearchedPageIndex: 1, items:[SOME_ITEMS_FROM_PAGE0, SOME_ITEMS_FROM_PAGE1]}. This would be continued for the remaining pages as well.
Now the paging is done and you are moved to some other screen and come back to the pagination screen. Now the redux state as per your question is {lastSearchedPageIndex: 2, items:[SOME_ITEMS_FROM_PAGE0, SOME_ITEMS_FROM_PAGE1, SOME_ITEMS_FROM_PAGE2]}. You are at the page and scroll to the end of page 0. As we already wrote the guard condition if(currentPage > lastSearchedPageIndex) { MAKE_AN_API_CALL_WITH_PAGE } and according to this, the current page is 1 and lastSearchedPageIndex is 2. So no API call would happen.
i have some heavy API request made through my app. so i want to implement feature that if user hit any API request then after user should navigate through any screen but there is some loading icon indicating that API request is in progress.
For example :-
if user is in create-product screen and after clicking on create product button user should navigate through any screen like profile,,product-view or any other screen while API request is processing but i want to show some loading indicator from any screen that API request is in progress in background.
What you want is a singleton
Which is
A design pattern that ensures that exactly one application-wide instance of a particular class exists. One of the Gang of Four's creational design patterns.
I recommend you read more about it
It will be useful for your case
Here is how to make it with react native
React native- Best way to create singleton pattern
I am using useInfiniteQuery with FlatList in React Native. In one of item in the list there is toggle functionality. I have successfully used useMutation and it works great.
When user scrolls and reach to end I fetch another page. Let's say I have loaded 5 pages i.e. 5 requests on the server. Now I go to the top on the first page and toggle first record using mutation. I used
onSettled: () => queryClient.invalidateQueries(key)
I observed that this causes all pages fetch in background i.e. again 5 requests on the server to fetch all pages which are already there and only for just one record.
so my question is that is it possible to avoid all page request and refetch only the page which was changed. I tried to look in documentation but couldn't find anything helpful on this.
I have an API which will return some response, from that response i get an ID which will be used to call another API to get another response.
More description below.
There is a list of movies loading, and when the loading is finished you can see any movie details by tapping on it and then navigating to the next screen, there on the next screen you have to show the movie details using the id of the movie which you get in the first screen or first API.
You have to handle the case if the internet is not working then you have to show a message "some error occurred" as you can see in the video for both the screens, this step will check your state management with the bloc pattern.
I've built an app for Shopify which displays in a page in a store's admin section. The way that works is that an html page from my server is displayed inside an iframe on the Shopify admin.
When any page is loaded in the Shopify admin, a blue progress bar displays at the top; usually it progresses across the page pretty quickly and is gone. On my page, however, the bar progresses across the page very slowly and never finishes. My page is very small, and it displays almost instantaneously.
It seems like Shopify is looking for something in the background, but I don't know what it is. Do you know?
You can stop the blue loading bar by calling ShopifyApp.Bar.loadingOff(). It would also be stopped if your app uses ShopifyApp.Bar.initialize(config).