Best practice: How to keep objects up to date

I’m looking for a best practice in ng2/ionic2 how to keep objects up to date, if the same object is loaded in another request again.

Example:

  1. Load a list of items. Each item has an author. Display it as list in a view
  2. User might click the author and get to some user details page.
  3. On user details page, a list of items created by the user is loaded
  4. User selects an item, which was already part of the list in #1 and does some action which modifies the item.
  5. Some notification flies in about some random event in the object modified in #4
  6. User clicks notification and the 3rd instance of the object is loaded and displayed in one more view. He does another modification here.

How to make sure the object modified in #6 and #4 is also updated in #1 (and #4)? They have been loaded in separate requests. There could be more places where the object is currently loaded which also would need to be updated. Maybe the application does not know the other places where they have been loaded, due to a modular setup.

I am looking for a reason which does not impact performance in a bad way (e.g. I could think about registering a lot of event handlers somewhere and notify on any object change, but this seems like a lot overhead for me for a large number of objects).

In a “perfect world” the Object in #1, #4 and #6 could even be the same, then I would not have to care about updating other ones AND also it is probably better for performance since I do not need to hold multiple instances of the same object.
But how should I achieve this? Since I want the latest data in #4 and #6 I would have to find a way to identify an existing object, update and return it instead of the loaded one. But how should I do this without creating another huge memory leak due to a centralized storage which will prevent garbage collection to clean up when needed?

The problem is: When user clicks back button after #6, he will come to a view with an outdated item. Clicking back one more time brings up an even more outdated item. I’d like to prevent this… :sweat:

Any ideas appreciated. :slight_smile: :dizzy_face:

Learn how to work with rxjs / observable. Generally, separate your view and data by creating providers / services for the data. In this way, there is only one copy of data and all views are reading from and updating the same data provider. The best part of observable is once you set it up, any updates will be automatically published to all the subscribed views.

Angular 2 services
https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Ionic 2 is loaded with rxjs by default. This is a good site to get started.
https://www.learnrxjs.io/

1 Like

Thanks for your response, but actually I’m not sure if you understood my problem.

I AM using rxjs and observables a lot. But how should this help in a scenario, where I have 3 different API-Endpoints. 2 Providing different list of items (which might overlap in some items or might not) and one providing just a specific element.
How should an observable help me? I could use one observable PER endpoint, but that does not solve my problem in any way.

In case you still think this should help, could you please post an example or some pseudo code?

Thanks!

Has somebody else an idea really covering this topic?

I think what you are searching for is Redux.
I am using it in my project and I find it absolutely awesome. Your state is always up to date and you don’t have to think about it anymore since Redux cares about that for you. At first maybe it is a bit hard to get into it, but once you know how to use it you will be much faster in development.

Have a look at the Angulars implementation of Redux called ngrx-store.

A basic application for Ionic 2.0 with AngularFire2 with ngrx/store & ngrx/effects to manage state

I’m looking for a best practice in ng2/ionic2 how to keep objects up to date, if the same object is loaded in another request again.

I’ve read a fair amount at this point, and I’m pretty sure the answer to your question is: nobody knows what the best practices are yet. I’ll say this about Redux (ngrx/store): I’m using it in a project myself, and it’s great, but I’m using it because I anticipate concurrent updates to an object from multiple users. If you use Redux, you pay two levels of indirection (so your code is clumsier in some ways), and you get concurrently updatable objects and easier debugging.

The use case you describe probably doesn’t require Redux. It sounds as though you could save everything in local storage when you leave a page, and refresh from local storage each time you enter a page. I found this to be a helpful writeup about pros and cons.