Правильный подход Ngrx при отображении сообщений об успехах, ошибках или перенаправлениях после запроса http - PullRequest
Новая
       34

Правильный подход Ngrx при отображении сообщений об успехах, ошибках или перенаправлениях после запроса http

0 голосов
/ 27 ноября 2018

У меня есть Ionic 3 App , где я использую ngrx / store и ngrx / эффектов для побочных эффектов или асинхронных действий.Все отлично работает, но есть одна маленькая проблема.

Когда я должен вызвать сообщение об ошибке или об успешном завершении после отправки действия.Я знаю, что задание эффекта состоит в том, чтобы отправить другое действие на основе отправленного действия от компонента.Но где мне его поставить?

Вот мой пример ниже моего reducer.ts 

mport { LOGIN_REQUEST, LOGIN_FAILED, LOGIN_SUCCESS } from './../actions/authenticate';
import { AuthState } from './../store';
import { Action } from '@ngrx/store';
import { PostState } from '../store';

const initialState: AuthState = {
    isAuthenticated: false,
    authenticating: false,
    token: null,
    error: null
}

export function authReducer(state = initialState, action: Action) {
    switch (action.type) {
        case LOGIN_REQUEST:
            return {
                ...state,
                authenticating: true,
                // USERS: (<any>action).data.USERS
            }
        case LOGIN_SUCCESS:
            return {
                ...state,
                authenticating: false,
                isAuthenticated: true,
                token: (<any>action).payload.data.token
            }
        case LOGIN_FAILED:
            return {
                ...state,
                authenticating: false,
                error: (<any>action).payload
            }
        default:
            return state;
    }
}

и в моих effect.ts 

@Effect()
    authenticate$ = this.actions$.ofType(authActions.LOGIN_REQUEST)
        .pipe(
            switchMap((data: any) => {
                return this.authApi.signIn(data.payload).pipe(
                    map((response: any) => ({ type: authActions.LOGIN_SUCCESS, payload: response })),
                    catchError(error => of({ type: authActions.LOGIN_FAILED, payload: error }))
                )
            })
        )

В моем app.module 

imports: [
    ...
    StoreModule.forRoot(rootReducer, { metaReducers }),
    EffectsModule.forRoot(effects),
    StoreDevtoolsModule.instrument({
      maxAge: 5
    })
  ],

и, наконец, в моем component.ts 

ionViewWillEnter() {
    this.store.select<any>('auth').subscribe(state => {
      this.auth = state
      if (state.error) this.displayErrorMessage()
    })
  }



    displayErrorMessage() {
    const toast = this.toastCtrl.create({
      message: 'Error occured',
      duration: 3000,
      position: 'top'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

Если вы знакомы с redux , вы знали, что поймете приведенный выше код в Redurs и эффектах .Все работает нормально, но я думаю, что в моем компоненте есть небольшая проблема, когда вызывать сообщение об успехе или об ошибке?Должен ли я назвать это вместо этого в результате?Но как?

Цените, если кто-то может помочь с примером кода.Заранее спасибо.

1 Ответ

0 голосов
/ 27 ноября 2018

Вы можете добавить ActionsSubject в компонент и прослушивать успешные или неудачные действия, но я бы не рекомендовал это.

Вместо этого также используйте эффекты для отображения уведомлений, например, с угловой панелью материала: 

@Effect({ dispatch: false })
error = this.actions.pipe(
 ofType<ServerError>(ActionTypes.ServerError),
 map(({ payload }) => {
   this.snackBar.open(payload.message, 'Close');
 })
)

Для получения дополнительной информации см. Начните использовать ngrx / эффекты для этого

...