This week we successfully updated our Angular v9 app to v11 and RXJS v6.6 with minimal issues. However, due to the store being in freeze mode, we are encountering errors when trying to update the store in certain areas of our code.
While most of the issues can be resolved easily in helper methods used in reducers, one common approach in our edit components is causing complications.
In these edit components for complete models/items, we typically follow this workflow:
- Retrieve the item from the store using RXJS operators such as filter, map, etc.
- Assign it to a property within the component in a subscribe block (as observable objects cannot be directly edited).
- Attempt to make edits using ngModel in the view or other component code.
This often leads to "Cannot assign to read-only property..." errors. While creating a shallow copy using spread or Object.assign() resolves some cases, more complex objects require a deep copy.
Is there a more effective way to retrieve an item from an RXJS/NGRX store for editing without resorting to custom code to generate a deep copy within the component? Currently, we are working around the issue by using JSON.parse(JSON.stringify(Object)), but it doesn't seem like the optimal solution!