Modifying your Application State by Dispatching Actions

Most Redux apps have a set of functions, called "action creators", that areused to set up and dispatch actions.

In Angular, it's convenient to define your action creators as @Injectable() services, decoupling the dispatch, creation and side-effect logic from the @Component classes in your application.

Synchronous Actions

Here is a simple example:

app/store/counter/counter.actions.ts

import {Injectable} from '@angular/core';
import {Store} from '@ngrx/store';
import {createAction} from '../createAction';
import {AppState} from '../../models/appState';
@Injectable()
export class CounterActions {
  static INCREMENT = 'INCREMENT';
  static DECREMENT = 'DECREMENT';
  static RESET = 'RESET';
  constructor(private store: Store<AppState>) {
  }
  increment() {
    this.store.dispatch(createAction(CounterActions.INCREMENT));
  }
  decrement() {
    this.store.dispatch(createAction(CounterActions.DECREMENT));
  }
  reset() {
    this.store.dispatch(createAction(CounterActions.RESET));
  }
}

As you can see, the action creators are simple functions that dispatch Action objects containing more information that describes the state modification.

Asynchronous Actions

This "ActionCreatorService" pattern comes in handy if you must handleasynchronous or conditional actions (users of react-redux may recognize thispattern as analogous to redux-thunk in a dependency-injected world).

app/store/counter/counter.actions.ts

import {Injectable} from '@angular/core';
import {Store} from '@ngrx/store';
import {createAction} from '../createAction';
import {AppState} from '../../models/appState';
@Injectable()
export class CounterActions {
  constructor(private store: Store<AppState>) {
  }
  incrementIfOdd() {
    this.store.select(appState => appState.counter.currentValue)
      .take(1)
      .subscribe(currentValue => {
        if (currentValue % 2 !== 0) {
          this.store.dispatch(createAction(CounterActions.INCREMENT);
        }
      });
  }
  incrementAsync(timeInMs: number = 1000) {
    this.delay(timeInMs).then(() => this.store.dispatch(createAction(CounterActions.INCREMENT)));
  }
  private delay(timeInMs: number) {
    return new Promise((resolve) => {
      setTimeout(() => resolve() , timeInMs);
    });
  }
}

In the incrementIfOdd() action creator, we create a one-time subscription to the counter's currentValue in the application state. From there, we check to see if it's odd before dispatching an action.

In the incrementAsync() action creator, we are delaying the actual call to dispatch(). We created a Promise that will resolve after the delay. Oncethe Promise resolves, we can then dispatch an action to increment the counter.

Actions that Depend on Other Services

The ActionCreatorService pattern becomes necessary in cases where your actioncreators must use other Angular services. Consider the followingSessionActions service that handles a remote API call:

import {Injectable} from '@angular/core';
import {Store} from '@ngrx/store';
import {createAction} from '../createAction';
import {AppState} from '../../models/appState';
@Injectable()
export class SessionActions {
  static LOGIN_USER_PENDING = 'LOGIN_USER_PENDING';
  static LOGIN_USER_SUCCESS = 'LOGIN_USER_SUCCESS';
  static LOGIN_USER_ERROR = 'LOGIN_USER_ERROR';
  static LOGOUT_USER = 'LOGOUT_USER';
  constructor(
    private store: Store<AppState>,
    private authService: AuthService
  ) {
  }
  loginUser(credentials: any) {
    this.store.dispatch(createAction(SessionActions.LOGIN_USER_PENDING));
    this.authService.login(credentials.username, credentials.password)
      .then(result => this.store.dispatch(createAction(SessionActions.LOGIN_USER_SUCCESS, result)))
      .catch(() => this.store.dispatch(createAction(SessionActions.LOGIN_USER_ERROR)));
  };
  logoutUser() {
    this.store.dispatch(createAction(SessionActions.LOGOUT_USER));
  };
}

原文: https://angular-2-training-book.rangle.io/handout/state-management/ngrx/modifying_your_application_state_by_dispatching_actions.html