DEV Community

Discussion on: Simple state management in Angular with only Services and RxJS

Collapse
 
sheldonhage profile image
Sheldon Hage • Edited

Hello Aslan,

I found a critical problem with this solution (which btw I found while trying to solve the same critical problem with my very own nearly identical code).

After literally weeks of troubleshooting this I am backed up against the wall and considering alternatives to Angular because I need the features that (it appears) only BehaviorSubject can solve.

But for now let's look at your Stackblitz example. At first glance it works perfectly. Bravo. I said to myself the same thing on my own code.

Then, try these things and you will soon realize there is a very serious problem and it is difficult to solve: corruption in the two arrays.

Recreate the problems in two methods:
Method 1:
Open your stackblitz and click rapidly on items in the incomplete and completed lists. Mark items as complete and the others as incomplete.... keep doing it maybe 20 times. You will see the following corruption take place:
a) Items will appear more than once on each list
b) Clicking an item to complete it will result in another already-completed item becoming incomplete and vice versa.
c) Clicks being ignored by the UI

Method 2:
Leave your stackblitz open in chrome and untouched for an hour or so. Come back and notice the first click (lets say mark an item as complete) is dead (or it appears dead). But upon the next click you will be able to add the same item twice to the completed list.

I believe there is an async / await sort of sequence issue that because of template code executing faster than service code, the UI will show array values that differ from what is in state service behaviorsubject.

Your example behaves just like my own.

I am not certain why more people have not noticed? Any ideas as to the root cause? I would be happy to demonstrate this over a zoom call.