ngrx-etc

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 70 Open GitHub ↗

Utility functions for NgRx

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# NgRx-etc

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](https://raw.githubusercontent.com/timdeschryver/ngrx-etc/master/)

## `mutableOn`

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

```ts
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.

```ts
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]
 }),
)
```

## `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<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`
  }),
)
```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table>
 <tr>
 <td align="center"><a href="http://timdeschryver.dev"><img src="https://avatars1.githubusercontent.com/u/28659384?v=4?s=100" width="100px;" alt=""/> Tim Deschryver</a> <a href="https://github.com/timdeschryver/ngrx-etc/commits?author=timdeschryver" title="Code">💻</a> <a href="https://github.com/timdeschryver/ngrx-etc/commits?author=timdeschryver" title="Tests">⚠️</a></td>
 <td align="center"><a href="https://twitter.com/maartentibau"><img src="https://avatars1.githubusercontent.com/u/4103756?v=4?s=100" width="100px;" alt=""/> Maarten Tibau</a> <a href="https://github.com/timdeschryver/ngrx-etc/commits?author=maartentibau" title="Documentation">📖</a></td>
 <td align="center"><a href="https://xianshenglu.xyz"><img src="https://avatars.githubusercontent.com/u/23273077?v=4?s=100" width="100px;" alt=""/> xiansheng lu</a> <a href="https://github.com/timdeschryver/ngrx-etc/commits?author=xianshenglu" title="Documentation">📖</a></td>
 </tr>
</table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

ngrx-etc

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README