State change issue

[mdudek]

Which @ngneat/elf-* package(s) are the source of the bug?

store

Is this a regression?

No

Description

I have modified your Todos example project to create reproduction example of issue, that I'm facing now in my Project. I added state prop 'processing' and it's value is unexpectedly changed when filter is modified. There is a statement in repos constructor that monitors todos & filter modifications. It sets 'processing' to true and back to false after 3s as some data processing simulation. It works correctly first time on load, but switches back from true to false immediately when you change filter by button. The 'processing' prop value is rendered to UI & logged to console.

Please provide a link to a minimal reproduction of the bug

https://angular-ivy-v6pzpb.stackblitz.io

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

No response

Anything else?

No response

Do you want to create a pull request?

No

[NetanelBasal]

What you mean is unclear to me. You are subscribed to the following:

combineLatest([this.todos$, this.filter$])

When you update the filter property, it runs and calls setProcessingState.

[mdudek]

Yes, but check console what happened when setProcessingState(true) is called.

1. Open app
2. Click 'Active' button

Expected: The 'processing' property should be set to true, after 3s is switched back to false.
The bug: The 'processing' property is set to true, but immediately switched back to false.

[NetanelBasal]

That's not a bug. That's how RxJS works. An explanation of this can be found on the Akita repository:

salesforce/akita#695 (comment)

[mdudek]

Thanks for explanation, is there some recommended pattern how to implement this case according to current RxJS behavior?

[mdudek]

I have found that I can wrap subscription code of combineLatest() by setTimeout and it works, but it is not a nice solution for me.

combineLatest([this.todos$, this.filter$]).subscribe(
    ([todos, filter]) => {
      setTimeout(() => {
        this.setProcessingState(true);
        setTimeout(() => {
          this.setProcessingState(false);
        }, 3000);
      });
    }
);

[NetanelBasal]

Try changing the subscription order. Subscribe to combineLatest after you subscribe to process.

[NetanelBasal]

@mdudek Here's an example of "stale emission" with an explanation and two solutions:

https://github.com/ngneat/elf/blob/master/packages/store/src/lib/stale.spec.ts

[mdudek]

Thanks for the example, it would be great to add the explanation of this case to the documentation.