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 which is a state management pattern relying on Reactive Extensions.

One of the convenient structures is @ngrx/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.

posted over 3 years ago

CC BY-SA 4.0

Alexei‭

5003 reputation 112 101 690 487