Как обновить список после удаления?

Question

У меня есть список пользователей и каждый раз после нажатия на кнопку удалить ,хочу что бы список обновлялся.Вот так выглядит мой список, при нажатии на хрестик пользователь удаляется , и при этом я все равно остаюсь на странице списка пользователей. Хочу когда нажал на кнопку удалить список обновился и уже не показывал пользователя которого я удалил. Когда я нажимаю удалить и перезагружаю страницу, то все работает отлично. Я не знаю может можно как то просто перезагрузить страничку в effect

Мой effect на удаление

 @Effect()
    DeleteUser: Observable<Action> = this.actions$.pipe(
        ofType<deleteUserAction.DeleteUser>(deleteUserAction.EDeleteUser.DeleteUser),
        map((action: deleteUserAction.DeleteUser) => action.payload),
        mergeMap((id: number) =>
            this.adminService.deleteUser(id).pipe(
                map(() =>
                {
                    console.log(id);
                    return new deleteUserAction.DeleteUserSuccess(id);
                }),
                catchError((errorMessage) => {
                    console.log(errorMessage);

                    let error = JSON.parse(JSON.stringify(`${errorMessage.error.text}`));
                    console.log(error);
                    return of(new BaseError(error));
                })
            ))
    );

Пробовал сделать вот так , типа когда удаление успешно перейти обратно на эту же страницу , но это неработает

@Effect({dispatch: false})
    DeleteUserSuccess: Observable<Action> = this.actions$.pipe(
        ofType<deleteUserAction.DeleteUserSuccess>(deleteUserAction.EDeleteUser.DeleteUserSuccess),
        tap(() => {
            return this.router.navigateByUrl('/admin/list-client');
        })
    )

Диспатчу так

 deleteUser(id){
    console.log(id);
    this.store$.dispatch(new DeleteUser(id));
  }

Answer 1

Дмитрий посмотрите в DeleteUserSuccess вам нужно модифицировать состояние вашего массива в App Store. Bам нужно добавить логику для этого.

const yourReducer = createReducer(
  initialState, // initial state of your state
  on(deleteUserAction.DeleteUserSuccess, (state, {id} => ({ ...state, users: (id) => state.users.filter(user => iser.id !== payload)  })),

);

export function reducer(state: State | undefined, action: Action) {
  return yourReducer(state, action);
}

БЛОГ НА HUSL

Как обновить список после удаления?

Ответы (1 шт):