Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/timdeschryver/ngrx-etc
Utility functions for NgRx
https://github.com/timdeschryver/ngrx-etc
angular immer ngrx redux
Last synced: 20 days ago
JSON representation
Utility functions for NgRx
- Host: GitHub
- URL: https://github.com/timdeschryver/ngrx-etc
- Owner: timdeschryver
- License: mit
- Created: 2019-05-01T11:01:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-10T05:09:45.000Z (over 2 years ago)
- Last Synced: 2024-10-29T15:14:35.765Z (2 months ago)
- Topics: angular, immer, ngrx, redux
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngrx-etc
- Size: 710 KB
- Stars: 69
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgRx-etc
[](#contributors)
## `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](https://allcontributors.org/docs/en/emoji-key)):
Tim Deschryver
💻 ⚠️
Maarten Tibau
📖
xiansheng lu
📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!