Without the mutableOn function our entityReducer would look something like this.
const entityReducer = createReducer<{ entities: Record<number, { id: number; name: string }> }>(
{
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.
const entityReducer = createReducer<{ entities: Record<number, { id: number; name: string }> }>(
{
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]
}),
)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.
const entityReducer = createMutableReducer<{ entities: Record<number, { id: number; name: string }> }>(
{
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`
}),
)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!
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent