React, Redux, Mobx] What is the best way to manage status with paging?

Question

I use mobx, and now also Hooks, to manage application status (if using Redux would face the same problem), and couldn’t find a better way to manage paginated listings.

If I have a list in the global state and several components use it, if one component needs to increment the page to show more results, it will cause another component to be updated (it cannot happen), and if you want to extract data from the list (like total items, for example), to show in multiple components (and be updated accordingly) I cannot, because the listing is partial.

My solution was to use rxjs and manage the status of the listings in the component itself (I know this is not good practice), and create services pras Apis, in them I created a Subject (rxjs) and for each service action (save, update, ...) I send an action. In my components I register to listen to the actions and update the state of the components (I did more or less when using Angular).

If you have any article or video recommendations that give a light.

Answer 1

"The best way" is the best way for your case. You can save in store the individual page that each component is "observing" in the list, so that each component would have its individual access to the pages. All components are "updated" when the store is modified, this is inevitable, but you have full control of what is rendered or not. That said, you need to define very well the behavior you want. When component X changes the list page, how should component Y behave? If component Y cannot be updated, then you need to control the current page each component is on.

I use Redux for that sort of thing, but that’s a personal choice. Your question is more a matter of semantics, need to define well the behavior you want.