NGRX remove element from stored array

Question

i have an object saved in a store like this:

export interface Referential {
  id: string;
  values: Array<ReferentialData>;
}

export interface ReferentialData {
  libelle: string;
  value: string;
  borderColor: string;
  primaryColor: string;
  secondaryColor: string;
}

i use the ReferentialData to fill a form, on the update, i doing this:

        const values: Array<ReferentialData> = referentials.values.map<ReferentialData>((data, index) => {
          return {
            ...data,
            primaryColor: this.form.controls.referentials.value.referentials[index]?.primaryColor,
            secondaryColor: this.form.controls.referentials.value.referentials[index]?.secondaryColor,
            borderColor: this.form.controls.referentials.value.referentials[index]?.borderColor,
            libelle: this.form.controls.referentials.value.referentials[index]?.libelle,
            value: this.form.controls.referentials.value.referentials[index]?.value
          };
        });
        this.store.dispatch(
          SettingsActions.updateReferentials({
            referential: { ...referentials, values }
          })
        );

but now I must give the option to delete a row in the form, so i'm doing this in the form:

this.referentialArray.removeAt(index);

it works well, but when saving, I save an empty line in the object, and when I reload I have an empty line with null everywhere, I tested several solutions like:

this.referentials[0].values = { ...this.referentials[0].values.splice(index, 1) };

But I have errors all the time, do you have any ideas for how to proceed?

Answer 1

I use a filter.

I'm not sure how to map this into your code, but my delete looks like this:

Component

  deleteProduct(product: Product): void {
    if (product && product.id) {
      if (confirm(`Really delete the product: ${product.productName}?`)) {
        this.store.dispatch(ProductActions.deleteProduct({ productId: product.id }));
      }
    } else {
      // No need to delete, it was never saved
      this.store.dispatch(ProductActions.clearCurrentProduct());
    }
  }

Effect

  deleteProduct$ = createEffect(() => {
    return this.actions$
      .pipe(
        ofType(ProductActions.deleteProduct),
        mergeMap(action =>
          this.productService.deleteProduct(action.productId).pipe(
            map(() => ProductActions.deleteProductSuccess({ productId: action.productId })),
            catchError(error => of(ProductActions.deleteProductFailure({ error })))
          )
        )
      );
  });

Reducer

  on(ProductActions.deleteProductSuccess, (state, action): ProductState => {
        return {
          ...state,
          products: state.products.filter(product => product.id !== action.productId),
          currentProductId: null,
          error: ''
        };
      }),

I have a complete example here: https://github.com/DeborahK/Angular-NgRx-GettingStarted/tree/master/APM-Demo4