NgRx Data or not NgRx Data for a first introduction to NgRx?

[akuma8]

Hi there,
First I would like to thank you for that great job you do by providing us this useful framework, also sorry if it's the wrong place to ask that question but I need some guidance to make some choices.
I am currently considering to add NgRx to my Angular/Ionic application but I don't know how to go as I've never used it before.

My question is: Should I use only NgRx Data or should I use each NgRx module(i-e: @ngrx/store,@ngrx/entity,@ngrx/effects,@ngrx/router-store) separately and configure each one manually?

To help me understand NgRx I read that book "Architecting Angular Applications with Redux, RxJS, and NgRx" but there isn't any reference to NgRx Data (I think the module does not yet exist when the book was written) but what bothered me while reading that book is the fact that there are lot of boilerplate code just for configuring NgRx.

Reading NgRx documentation I saw that paragraph about NgRx Data: https://ngrx.io/guide/data#ngrx-data which explains that the module automates the creations of all configurations needed by NgRx to work well, thus avoiding the developer to write less boilerplate configuration code and more business code.

The drawback from using NgRx Data is that it will not help me understand deeper how things work together, if a day I have a problem it will take me more time to solve it if I don't understand how things work behind the scene. I am a Java/Spring developer and after looked at some NgRx Data codes, it looks like a lot to Spring Data but I understand how Spring Data works because I did many configurations manually before the advent of Spring Boot.

So that's where I am, on the one hand I am afraid to not fully understand how NgRx works if I start with it by using NgRx Data on the other hand I would like to avoid writting lot of boilerplate code just to configure NgRx. I need some advices and guidance. Thank you a lot.

[akuma8]

@brandonroberts Sorry to tag you here but I don't see anyone else to give me some hints. Thank you

[HugoBelotDeloro]

I have been learning front-end web development and NgRx over the past three weeks (professionally) and I highly recommend starting without data. Once you understand redux properly and have implemented a first store without data, you can try and start using it.
NgRx data indeed hides away a lot of the inner workings and it might be harder to understand why things work the way they do if you can't see what they are like inside. ngrx/data is another layer of abstraction to understand and is not quite as straightforward as redux.
Also the documentation is... not the greatest part of ngrx at the moment, and data being (I believe) quite a recent addition it is even worse than the rest on that front.
I have found the redux doc to be very useful for basic concepts and good practices, but there are basically no resource that translates to data. Reading the source directly is your best bet, and the examples from the doc come from this demo which has not been updated in two years so you should not rely on it for details (though the is a PR to make it the official demo app).

[akuma8]

Thanks a lot for your suggestion. I bought some online courses about NgRx and hope to learn more about it.

[narslan]

You have to create a new project to understand ngrx.
I would start with this
Reactive State Management Using NgRx and Angular (with Brandon Roberts) — Learn With Jason
.

Later if you want grab you the code here
git clone [email protected]:ngrx/platform.git,
That will get you a nice reference application:
npm install
npx nx serve
Open the project with the editor.
Under every module in the project, there are directories, that gives hints about relevancy with ngrx
They are, actions, reducers and effects. They are main components of ngrx.
We also have a stores, but it doesn't have a directory:).
stores reside in your module. Those are the most important components in ngrx, since they represent some states.
Those states are global states. When the state changed from one value to another,
that change will be available to everybody, who listens
for the changes in that store. The module under
projects/example-app/src/app/auth is worth to study. I use it as a boilerplate and a reference.
Have fun with it.

If you are interested in "local", volatile states instead of persistent global states. Then check
@ngrx/component-store. Though, it is documentation could be better.
This is a good introduction to that.
How to migrate state from NgRx Store to NgRx ComponentStore

[donohoea]

If your goal is understanding how it works, I would suggest working with NgRx first until you understand the boilerplate, once you're comfortable with add ngrx/entity and then move to ngrx/data.