Angular with ngrx store, synchronize backend data (design choice)

I am building an Angular app that is connected to a backend REST API. At the moment the app is only fetching data from the backend without updaing any of it. This question came up because I was about to make the data editable in the frontend - and be transmitted to the backend.

Right now the data is loaded into the components using Angular services. This works ok but I'd like to use a global ngrx store instead. This raises the question: Should I continue to load (and now send) data to the backend by using services, or is it a better Idea to use ngrx Effects?

I think that it's far better to use a store in every component than dealing with fetching or services, but using Effects to send and load every bit of data does not look right to me.

I found this article and it states that it is not a good idea to do backend communication in Effects and I do agree (though I'm not sure, thats why I'm asking). Is there a good way to combine services and a store?

How do you structure apps that have a similar structure? Best regards.

Solution

There is a trade-off:

You could avoid both RxJS and Store, but this is impractical and unrealistic for building any Angular application at scale. You will end up working much harder in writing lots of code to avoid these things. And probably sacrificing some degree of correctness along the way.
You can skip Store and go quite a long way with extensive use of RxJS for data flow. This really works very well.
As an application grows though, if you are only using homegrown RxJS base data flow for an application, eventually you probably find you are gradually reinventing aspects of Store / Redux.

This video is 46 minutes long but can help you: https://www.youtube.com/watch?v=eBLTz8QRg4Q