NgRx-etc


mutableOn

Without the mutableOn function our entityReducer would look something like this.

``ts
const entityReducer = createReducer<{ entities: Record }>(
{
entities: {},
},
on(create, (state, { type, ...entity }) => ({
...state,
entities: { ...state.entities, [entity.id]: entity }
}),
on(update, (state, { id, newName }) => {
const entity = state.entities[id]

if (entity) {
return {
...state,
entities: {
...state.entities,
[entity.id]: { ...entity, name: newName }
}
}
}

return state;
},
on(remove, (state, { id }) => {
const { [id]: removedEntity, ...rest } = state.entities;

return { ...state, entities: rest };
}),
)
`

With the mutableOn function we are able to directly perform state mutations in reducers with less noise, and more concise code.

`ts
const entityReducer = createReducer<{ entities: Record }>(
{
entities: {},
},
mutableOn(create, (state, { type, ...entity }) => {
state.entities[entity.id] = entity
}),
mutableOn(update, (state, { id, newName }) => {
const entity = state.entities[id]
if (entity) {
entity.name = newName
}
}),
mutableOn(remove, (state, { id }) => {
delete state.entities[id]
}),
)
`

mutableReducer

For when you want to go all-in!
Does work with the NgRx on method, as well as the mutableOn method.
The only difference is that it's needed to return the state with the on method.

`ts
const entityReducer = createMutableReducer<{ entities: Record }>(
{
entities: {},
},
on(create, (state, { type, ...entity }) => {
state.entities[entity.id] = entity

// explicit return state with on
return state
}),
on(update, (state, { id, newName }) => {
const entity = state.entities[id]
if (entity) {
entity.name = newName
}

// explicit return state with on
return state
}),
mutableOn(remove, (state, { id }) => {
delete state.entities[id]
// don't have to return state with mutableOn
}),
)
``

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tim Deschryver 💻 ⚠️

Maarten Tibau 📖

xiansheng lu 📖

This project follows the all-contributors specification. Contributions of any kind welcome!