How to apply updateItem to multiple/all items in Ngxs?

user_10642266 0
Viewed 446

I need an alternative to change the same attribute, with the same value, for all items in an array in Ngxs.

I tried to use updateItem(() => true, patch({ ... })), but it doesn't work because the first function, () => true, just returns the first match and ends up updating only a single item.

The following is a simplified example of what I tried to do:

import { State, Action, StateContext } from '@ngxs/store';
import { patch, append, removeItem, insertItem, updateItem } from '@ngxs/store/operators';

export interface AnimalsStateModel {
  others: { /*...*/ }[];
  rabbits: Rabbit[];
}

export interface Rabbit {
  name: string,
  alive: boolean,
}

export class ChangeRabbitAlive {
  static readonly type = '[Animals] Change rabbit alive';
  constructor(public payload: { name: string; alive: boolean }) {}
}

export class ChangeAllRabbitsDead {
  static readonly type = '[Animals] Change all rabbits dead';
  constructor(public payload: { }) {}
}

@State<AnimalsStateModel>({
  name: 'animals',
  defaults: {
    others: [ /*...*/ ],
    rabbits: [
      { name: 'Michael', alive: true },
      { name: 'John', alive: true },
      { name: 'Jimmy', alive: true },
      { name: 'Jake', alive: true },
      { name: 'Alan', alive: true },
    ]
  }
})
export class AnimalsState {
  
  @Action(ChangeRabbitAlive)
  changeRabbitAlive(ctx: StateContext<AnimalsStateModel>, { payload }: ChangeRabbitAlive) {
    ctx.setState(
      patch({
        rabbits: updateItem<Rabbit>(rabbit => rabbit.name === payload.name, patch({ alive: payload.alive }))
      })
    );
  }
  
  @Action(ChangeAllRabbitsDead)
  changeAllRabbitsDead(ctx: StateContext<AnimalsStateModel>, { payload }: ChangeAllRabbitsDead) {
    const isAlive = { alive: false };
    ctx.setState(
      patch({
        //rabbits: updateItem<Rabbit>(name => true, patch({ alive: false }))// Type 'boolean' is not assignable to type 'false'
        rabbits: updateItem<Rabbit>(() => true, patch(isAlive))
      })
    );
  }
}

Is there any way to kill all the rabbits at once?

Extra: If you could explain why the error "Type 'boolean' is not assignable to type 'false'" occurs in that situation, that would also be appreciated.

ngxs angular
3 Answers

I found this thread [DOCS]: Share your custom State Operators here! that mentions a custom operator updateManyItems, apparently what I was looking for. However, it is not available in the general library, nor could I find its implementation. So I tried some alternatives mixing basic operators and came up with a simple solution using compose:

To update them all, just add an updateItem for each index in the list:

const isAlive = { alive: false };
const updateItems = ctx.getState().rabbits.map((r, i) => updateItem<Rabbit>(i, patch(isAlive)));
ctx.setState(
    patch({
        rabbits: compose(...updateItems),
    })
);

To update a portion of the items, just add an updateItem filtering by some unique identifier of the item:

const isAlive = { alive: false };
const updateItems = payload.rabbitNames.map((rn) => updateItem<Rabbit>(rabbit => rabbit.name === rn, patch(isAlive)));
ctx.setState(
    patch({
        rabbits: compose(...updateItems),
    })
);

If the item identifier may be duplicated in the list, it is possible to update by index as well:

const isAlive = { alive: false };
const indexList = ctx.getState().rabbits.reduce((result, r, i) => 
    (payload.rabbitNames.includes(r.name) ? result.push(i) : null, result) , []);
const updateItems = indexList.map((i) => updateItem<Rabbit>(i, patch(isAlive)));
ctx.setState(
    patch({
        rabbits: compose(...updateItems),
    })
);

A native operator could be better optimized, but these alternatives still work fine.

user_106422660

Not sure if it is the prettiest way of doing it, but conceptually:

let state2 = {
  ...state,
  rabbits: state.rabbits.map(x => {
    return {
      name: x.name,
      alive: false
    }  
  })
}
user_45260120

You can achieve that by creating a custom state operator as described in the NGXS docs.

You can try something like the following:

import { StateOperator } from '@ngxs/store';
import { isStateOperator } from '@ngxs/store/operators';
import { Predicate } from '@ngxs/store/operators/internals';

/**
 * @param selector - Array of indexes or a predicate function
 * that can be provided in `Array.prototype.findIndex`
 * @param operatorOrValue - New value under the `selector` index or a
 * function that can be applied to an existing value
 */
export function updateItems<T>(
  selector: number[] | Predicate<T>,
  operatorOrValue: Partial<T> | StateOperator<T>
): StateOperator<T[]> {
  return function updateItemsOperator(existing: T[]) {
    let indexes = [];
    if (!selector || !operatorOrValue || !existing) {
      return existing;
    }
    if (isPredicate(selector)) {
      indexes = findIndexes(selector, existing);
    } else if (isArrayNumber(selector)) {
      indexes = selector;
    }

    if (invalidIndexes(indexes, existing)) {
      return existing;
    }
    let values: Record<number, T> = {};

    if (isStateOperator(operatorOrValue)) {
      values = indexes.reduce(
        (acc, it) => ({ ...acc, [it]: operatorOrValue(existing[it]) }),
        {}
      );
    } else {
      values = indexes.reduce(
        (acc, it) =>
          isObject(existing[it])
            ? { ...acc, [it]: { ...existing[it], ...operatorOrValue } }
            : { ...acc, [it]: operatorOrValue },
        {}
      );
    }

    const clone = [...existing];
    const keys = Object.keys(values);
    for (const i in keys) {
      clone[keys[i]] = values[keys[i]];
    }
    return clone;
  };
}

function isObject(value: any): boolean {
  return typeof value === 'object';
}

function isPredicate<T>(
  value: Predicate<T> | boolean | number | number[]
): value is Predicate<T> {
  return typeof value === 'function';
}

function isArrayNumber(value: any[]): boolean {
  for (const i in value) {
    if (isNaN(value[i])) {
      return false;
    }
  }
  return true;
}

function invalidIndex(index: number): boolean {
  return isNaN(index) || index < 0;
}

function invalidIndexes<T>(
  indexes: number[],
  existing: Readonly<T[]>
): boolean {
  for (const i in indexes) {
    if (
      !existing ||
      existing?.length - 1 < indexes[i] ||
      isNaN(indexes[i]) ||
      invalidIndex(indexes[i])
    ) {
      return true;
    }
  }
  return false;
}

function findIndexes<T>(
  predicate: Predicate<T>,
  existing: Readonly<T[]>
): number[] {
  return existing.reduce((acc, it, i) => {
    const index = predicate(it as any) ? i : -1;
    return invalidIndex(index) ? acc : [...acc, index];
  }, []);
}
user_151596030
Related