Данные NgRx - Как подключиться к успешному действию addOne безопасным способом? - PullRequest
1 голос
/ 06 ноября 2019

Я новичок в @ngrx/data и просматриваю документацию.

Используя руководство Я смог повторить то, что ранее делал вручную -например, используя service на этой странице обзора, следующие работы вызывают REST-API и добавление поставщика в хранилище.

component.ts

  onSave(supplier: Supplier) {
    this.supplierService.add(supplier);
  }

Я знаю по эффекту, что могу сделать следующее:

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType('[Supplier] @ngrx/data/save/add-one/success'),
        tap(console.log)
      ),
    { dispatch: false }
  );

НО - есть ли типобезопасный способ подключиться к успешному действию вызова / действия объекта API ввообще?

Обновление - уточнение

Я использую @ngrx/data и , поэтому я сам не создаю действия вместе сэкспорт типов.

При успешном добавлении поставщика - который после http-вызова приводит к действию с типом: '[Supplier] @ngrx/data/save/add-one/success' - я хочу выполнить эффект. Вместо использования строки '[Supplier] @ngrx/data/save/add-one/success' (показанной выше) есть ли безопасный хук типа?

Ранее (при создании действий самостоятельно) я экспортировал бы тип объединения и сделал бы ofType(supplierActions.addSupplier)

Обновление - ближе к ответу

Найдены ofEntityType и ofEntityOp, что приближает меня к моей цели, так как они работают как ofType:

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofEntityType('Supplier'),
        ofEntityOp(EntityOp.SAVE_ADD_ONE_SUCCESS),
        tap(console.log)
      ),
    { dispatch: false }
  );

Теперь просто найдите способ набрать 'Supplier' из entityMetadata

const entityMetadata: EntityMetadataMap = {
  Supplier: {}
};

1 Ответ

0 голосов
/ 06 ноября 2019

Вы можете просмотреть мой полный код здесь

Ниже приведен мой маленький образец

Я определю список действий

export enum PostActionTypes {
  LoadPosts = "[Post] Load Posts",
  LoadPostsSuccess = "[Post] Load Posts Success",
  LoadPostsFail = "[Post] Load Posts Fail",
  LoadPost = "[Post] Load Post",
  LoadPostSuccess = "[Post] Load Post Success",
  LoadPostFail = "[Post] Load Post Fail",
  UpdatePost = "[Post] Update Post",
  UpdatePostFail = "[Post] Update Post Fail",
  UpdateSelectedPost = "[Post] Update Selected Post"
}

export const LoadPosts = createAction(PostActionTypes.LoadPosts);

Итакв моем эффекте

getPosts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PostActions.LoadPosts),
      switchMap(_ => {
        return this.postService
          .getPosts()
          .pipe(
            map(
              (posts: IPost[]) => PostActions.LoadPostsSuccess({ posts }),
              catchError(errors => of(PostActions.LoadPostsFail(errors)))
            )
          );
      })
    )

Таким образом, вы можете легко использовать безопасный тип в этом случае вместо использования магической строки

...