I'm new to NgRx and I have some questions about how to structure the state in a Store.
We're building an internal CRM in Angular to manage client information. Right now, we're handling the state using a service with a subject pattern. Here's an overview of our app structure:
App
├── Business
│ ├── Business details
│ ├── Business notes
│ ├── Business appointments
│ └── Business sales
├── Notes
├── Appointments
└── Sales
When a user navigates to "Notes," they should see all notes in the CRM. However, when they navigate to "Business/1/Notes," they should only see the notes associated with Business ID 1.
The problem is that the state in the "Business" feature and the other features are not shared. For example, when a user navigates to "Business/1/Notes," the app fetches the appointments data from the server, even though it already exists in the "Notes" feature.
This is not an optimal solution, and it's one of the reasons why we want to implement NgRx. Ideally, when the user navigates to either "Business/1/Notes" or "Notes" it should get the necessary data from the "Notes" feature slice (if it exists) and create a view model based upon the selector.
My question is: How should I structure the state to allow multiple modules to modify the same slice of state and create view models from that slice in multiple components?
I think you answered this question already.
You can store the notes into its own NgRx Feature (state slice). The stored notes should just be a note entity. You can also look at @ngrx/entity to manage entity slices.
Both modules (notes and business) can access the notes state using selectors. The notes feature should have some simple selectors to expose the state. The selectors of a module reuse the notes selectors to build up view models.
To fetch the data you'll have a notes effect that listens to actions dispatched from the notes and business modules. Within this effect you'll read the notes state to check if it needs to be fetched or not.