Question

我有一个 Ionic 3 App ，在其中我使用ngrx/store和ngrx/effects进行副作用或异步操作。一切正常，但有一个小问题。

在分派操作后，何时应调用错误或成功消息。我知道效果工作是基于组件的分派动作来分派另一个动作。但是我应该放在哪里？

这是我的 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;
    }
}

和我的 effects.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 ，您知道您会理解上面的 reducers 和 effects 中的代码。一切工作正常，但我认为组件中的何时调用成功或错误消息有一点问题？我应该称之为效果吗？但是如何？

了解是否有人可以帮助提供示例代码。预先感谢。

Answer 1

您可以将SVG('svgNodeId').text('center my text in path') .attr({id:'myText'}) .font({size:15}) .path('M65,25 L 42 35 28 53 27 77 37 93 52 103 69 108 90 100 104 84z');注入组件中，并听取成功或失败的动作，但是我不建议这样做。

也可以使用效果来显示通知，例如带有棱角分明的小吃吧：

ActionsSubject

有关更多信息，请参见Start using ngrx/effects for this

Ngrx在http请求后显示成功或错误消息或重定向的正确方法

1 个答案: