Angular метод диспетчерского действия NgRx - PullRequest
Новая
       6

Angular метод диспетчерского действия NgRx

0 голосов
/ 20 января 2020

Итак, мы имеем этот обычный эффект doSomething. Каков официальный способ отправки другого действия с именем doSomethingElse? Документация ничего не говорит о правильном пути. В конце концов, разница может не сильно отличаться, но мне не очень нравится тот факт, что я могу использовать dispatch: false примерно в 95% моей кодовой базы.

Диспетчеризация с использованием dispatch: false: 

doSomething$ = createEffect(() =>
this.actions$.pipe(
  ofType(AuthActions.doSomething),
  map(() => AuthActions.doSomethingElse())
));

doSomethingElse$ = createEffect(
() =>
  this.actions$.pipe(
    ofType(AuthActions.doSomethingElse),
    tap(() => console.log('it works!'))
  ),
{ dispatch: false });

Диспетчерское действие без dispatch: false: 

doSomething$ = createEffect(
() =>
  this.actions$.pipe(
    ofType(AuthActions.doSomething),
    tap(() => {
      this.store.dispatch(AuthActions.doSomethingElse());
    })
  ),
{ dispatch: false });

doSomethingElse$ = createEffect(
() =>
  this.actions$.pipe(
    ofType(AuthActions.doSomethingElse),
    tap(() => console.log('it works!'))
  ),
{ dispatch: false });

Оба решения работают, но я не уверен, какой правильный способ использования NgRx.

Ответы [ 2 ]

0 голосов
/ 20 января 2020

Второй не рекомендуется.

Следующий код будет жаловаться, если вы не сопоставили действию, тогда как установка { dispatch: false } снимает эту проверку и должна использоваться только для побочных эффектов , таких как навигация , настройка localStorage et c. 

doSomething$ = createEffect(() =>
this.actions$.pipe(
  ofType(AuthActions.doSomething),
  map(() => AuthActions.doSomethingElse())
));

В вашем примере неясно, зачем нужны два действия, когда нужно одно.

Если вам нужен регистратор общих действий, будет работать следующее: 

/**
 * Log all actions in the console
 */

export function logger(
  reducer: ActionReducer<RootStoreState.State>
): ActionReducer<RootStoreState.State> {
  return (state, action) => {
    const result = reducer(state, action);
    if (action.type.startsWith("[")) { <----FILTER TO ONLY USER CREATED ACTIONS (i.e. not router)---------
      console.groupCollapsed(action.type);
      console.log("prev state", state);
      console.log("action", action);
      console.log("next state", result);
      console.groupEnd();
    }

    return result;
  };
}

и app.module.ts 

export const metaReducers: MetaReducer<any>[] = !environment.production
  ? [logger]
  : [];

@NgModule({
  imports: [
    ...
    StoreModule.forRoot(ROOT_REDUCERS, {
      metaReducers, <--------------------------------------KEY LINE-----------
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true
      }
    }),
    ...
0 голосов
/ 20 января 2020

Я поставлю его в старом стиле, потому что я еще не перешел на новый способ ngrx, но он также тот же.

Actions.ts 

export enum AuthActionTypes {
    SIGNUP = '[AUTH] SIGNUP',
    SIGNUP_SUCCESS = '[AUTH] SIGNUP_SUCCESS',
}

export class Signup implements Action {
    readonly type = AuthActionTypes.SIGNUP;
    constructor(public payload: any) { }
}
export class SignupSuccess implements Action {
    readonly type = AuthActionTypes.SIGNUP_SUCCESS;
}

export type AuthActions =
    Signup |
    SignupSuccess;

Эффект 

@Effect()
    signup$: Observable<Action> = this.actions$.pipe(
        ofType(AuthActionTypes.SIGNUP),
        map((action: Signup) => action.payload),
        map((payload) => {
              // whatever
            return new SignupSuccess(); // this come from AuthActions inner // action.ts, you are dispaching SignupSuccess();
        }),

@Effect()
    signupSuccess$: Observable<Action> = this.actions$.pipe(
        ofType(AuthActionTypes.SIGNUP_SUCCESS),
        map((action: Signup) => action.payload),
        map((payload) => {
              // whatever
            return new XAction(); 
        }),
```
...