Post History

How to work with current entity changes when working with @ngrx/store and @ngrx/entity?

I am fairly new to working with [@ngrx pattern in Angular](https://ngrx.io/docs) which is a state management pattern relying on Reactive Extensions.  

One of the convenient structures is [@ngrx/entity](https://ngrx.io/guide/entity) which helps with managing record collections. 

One typical scenario in the application is to access of list of Foos and enter a Foo to edit its content. I have managed the list store (some sort of Redux store) slice with @ngrx/entity, but also used the same pattern for managing the list of full items (as opposed to the list items which are more lightweight).

This means that @ngrx/entity helps with adding new items, removing them and automatically caching everything related to them. 

One advantage is that if reenter the same entity and the server is not available, I still get the old data (as opposed to delivering nothing to the user).

One downside is that all reducer functions must operate on the "big" list (list of full entities). A typical reducer function would look like the following:

	mutableOn(SomeFooAction, (state, action) => {
		const toUpdate = state.entities[action.payload.id];

        // do some operations with the entity list to be updated

		return state;
	}),

`mutableOn` is just a replacement of `on` that allows working in a mutable way with the state, thus reducing the code required to get a new state (otherwise a lot of deep cloning might be required).

One alternative I am thinking of is to not use the `@ngrx/entity` list adapter anymore and simply allow a single entity (`currentFoo`) to be managed when in edit view. 

I am wondering how is this typically handled in web applications relying on a Redux-like pattern.