@ngrx/store 从组件分派但不从@ngrx/effect 分派

Question

以下代码在从组件分派时有效但在 ngrx/effect

上不起作用（我的意思是更新商店但不在 ui 中）

最爱-product.reducer.ts::

case fromFavouriteProduct.ADD_TO_FAVOURITE_PRODUCT_SUCCESS: {
  state.data.push(action.payload);/*working when dispetch from component but not working when dispatch form @effect*/
  // state.data=[] /*but its work always*/
  // state.data=action.payload /*its also  working  always*/
  return {
    ...state,
    loading: false,
    loaded: true,
  }
}

最爱-product.effect.ts::

@Effect()
addFavouriteProduct$ = this.actions$.ofType(favouriteProductActions.ADD_TO_FAVOURITE_PRODUCT).pipe(
    switchMap((action: any) => {

        return this.favouriteProductService
            .insert(action.payload)
            .pipe(
                map(result => new favouriteProductActions.AddToFavouriteProductSuccess(result)),
                catchError(error => of(new favouriteProductActions.LoadFavouriteProductFail(error)))
            );

    })
)

Answer 1

如果您要将输入传递给服务，建议使用地图来获取负载

@Effect()
addFavouriteProduct$ = this.actions$.ofType(favouriteProductActions.ADD_TO_FAVOURITE_PRODUCT).pipe(
    map((action) => action.payload),
    switchMap((payload) => {

        return this.favouriteProductService
            .insert(payload)
            .pipe(
                map(result => new favouriteProductActions.AddToFavouriteProductSuccess(result)),
                catchError(error => of(new favouriteProductActions.LoadFavouriteProductFail(error)))
            );

Answer 2

我解决了这个问题欢呼它只是一个愚蠢的:( 尽管状态是不可变对象

 let data = state.data.slice();

        data.push(action.payload);

        return <FavouriteProductState>{
            ...state,
            loading: false,
            loaded: true,
            data

        }

@ngrx/store 从组件分派但不从@ngrx/effect 分派

@ngrx/store dispatch working from component but not working from @ngrx/effect

javascript

angular

ngrx-store

ngrx-effects