JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 920
  • Score
    100M100P100Q103016F
  • License MIT

Utilities for NgRx

Package Exports

  • ngrx-etc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngrx-etc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgRx-etc

All Contributors

mutableOn

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

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.

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):


Tim Deschryver

💻 ⚠️

Maarten Tibau

📖

xiansheng lu

📖

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