Почему мое действие с побочным эффектом не может распознать свойство типа возвращаемого действия?

Я пытаюсь настроить SideEffect для своего хранилища аутентификации. каждый раз, когда я запускаю действие (TrySignIn), я получаю следующую ошибку:

AuthEffects.authSignin отправил недопустимое действие

ОШИБКА TypeError: действия должны иметь свойство типа

Насколько я понимаю, исходя из типа ошибки, мое возвращаемое действие не имеет свойства типа, что здесь не так, я возвращаю два действия, SIGNIN и SET_TOKEN, и оба они имеют свойства типа.

Я ценю, если кто-нибудь скажет мне, что я здесь делаю не так,

Редактировать:

Я воспроизвел ошибку здесь, вы сможете увидеть те же ошибки, что и я, в консоли .

Я публикую соответствующий код для своей реализации,

Мои действия с аутентификацией

export class TrySignin implements Action {
  readonly type = TRY_SIGNIN;

  constructor(public payload: Credentials) {}
}

export class Signin implements Action {
  readonly type = SIGNIN;
}

export class SetToken implements Action {
  readonly type = SET_TOKEN;

  constructor(public payload: string) {}
}

Мой побочный эффект,

@Injectable()
export class AuthEffects {
  @Effect()
  authSignin = this.actions$
    .ofType(AuthActions.TRY_SIGNIN)
    .map((action: AuthActions.TrySignin) => {
      return action.payload;
    }).switchMap(
      (authData: Credentials) => {
         return (this.httpService.postRequest('/Account/Login', (authData)));
      })
      .map(
        (res) => {
          console.log(res['authToken']);
          return [
            {
              type: AuthActions.SIGNIN
            },
            {
              type: AuthActions.SET_TOKEN,
              payload: res['authToken']
            }
          ];

        }
      );

И в моем компоненте я запускаю свое действие,

login() {
    this.store.dispatch(new authActions.TrySignin(this.loginForm.value));
}

angular ngrx ngrx-effects ngrx-store
person JSON    schedule 07.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эффекты изменяют отправленное действие до того, как оно поступит в магазин. Похоже, вы изменяете действие в полете, чтобы преобразовать (сопоставить) его в

      return [
        {
          type: AuthActions.SIGNIN
        },
        {
          type: AuthActions.SET_TOKEN,
          payload: res['authToken']
        }
      ];

^^ Это массив. Он не соответствует интерфейсу Action (и не имеет свойства типа).

Если вы отредактируете это, чтобы оно выглядело как

      return {
          type: AuthActions.SIGNIN
        }

Это работает?

Обновлять

Поднятый из комментариев: если вы хотите, чтобы ваше действие отправляло дополнительные действия, используйте mergeMap(). Он добавляет к существующему наблюдаемому, а не заменяет его.

person John    schedule 07.01.2018
comment
да, вроде работает, ошибок нет, но как вернуть второе действие AuthActions.SET_TOKEN с его полезной нагрузкой? - person JSON; 07.01.2018
comment
@JSON Я делал это раньше, но не припоминаю. Я думаю, что использование mergeMap() позволит вам. На самом деле, если я правильно помню, один из примеров на веб-сайте NGRX показывает вам, как это сделать. (Возможно ...) - person John; 07.01.2018
comment
@JSON Я думаю, это mergeMap, тем больше я думаю об этом. Я считаю, что mergeMap добавляет к существующему наблюдаемому, а не заменяет его. Я бы начал там - person John; 07.01.2018
comment
пожалуйста, можете добавить его к своему ответу для использования в будущем - person JSON; 07.01.2018