Currently, our team is delving into our inaugural Angular projects with ngrx-store. We find ourselves deliberating whether the state should be normalized or not, sparking varying viewpoints.
Proponents of a nested store argue that it would streamline maintenance and usage, especially considering the API already delivers nested data and occasionally necessitates a complete clearing of an object from the store.
For instance: Let's consider a feature store named customer. This store encompasses customer-lists and selected customers. Notably, the selected customer object comprises more properties compared to customer objects in the list.
We exhibit the customer list (model: CustomerList) stored in the component, permitting users to navigate to a detailed page showcasing customer specifics (model: CustomerDetail). Within this detail page, users can manage various customer sublists (such as addresses, phones, faxes, etc.). Upon exiting the detail view back to the list, the stored customer object should reset.
export interface CustomerState {
customers: CustomerList[],
customer: CustomerDetail
};
export interface CustomerList {
customerId: number;
name: string;
};
export interface CustomerDetail {
customerId: number;
firstName: string;
lastName: string;
addressList: CustomerDetailAddressList[];
phoneList: CustomerDetailPhoneList[];
emailList: CustomerDetailEmailList[];
faxList: CustomerDetailFaxList[];
/* ... */
};
Consider a scenario where a user creates a new address for a customer on the specific customer's details page. The address is then posted to the API, following which, upon successful response, the store fetches the updated addressList from the API and inserts it into the customer's addressList within the store.
Opponents of a non-normalized state highlight its major drawback:
The deeper the nesting, the more intricate and lengthy the mappings become inside the store for setting or retrieving data.
On the flip side, proponents of normalization question the benefits of eliminating nesting within the customer object. In their perspective, normalizing the state could entail complexities due to differing structures between customerList and customerDetail objects. If both objects were identical, simply storing the selected customer's ID and fetching data from the customer list by ID would suffice.
Another concern raised is that, in a normalized state, leaving a customer detail page would require clearing not just the customer object but also any related lists tied to the customer.
export interface CustomerState {
customers: CustomerList[],
customer: CustomerDetail,
customerAddressList: CustomerDetailAddressList[];
customerPhoneList: CustomerDetailPhoneList[];
customerEmailList: CustomerDetailEmailList[];
customerFaxList: CustomerDetailFaxList[];
};
tl;dr
We are curious about your experiences and thoughts on utilizing the store - normalized or otherwise. How can we leverage the advantages of both approaches effectively? Your insights are highly valued!
If anything seems unclear or nonsensical, please do let us know. As perpetual learners, we greatly appreciate any assistance, feedback, or advice provided.