Actions

Redux uses a concept called Actions, which describe state changes to your application. Redux actions are simple JSON objects that implement the Action interface provided by @ngrx:

  1. export interface Action {
  2.   type: string;
  3.   payload?: any;
  4. }

The type property is a string used to uniquely identify your action to your application. It's a common convention to use lisp-case (such as MY_ACTION),however you are free to use whatever casing style that makes to your team, as long as it's consistent across the project.

The payload property provides a way to pass additional data to other parts of Redux, and it's entirely optional.

Here is an example:

  1. const loginSendAction: Action = {
  2.   type: 'LOGIN_SEND',
  3.   payload: {
  4.     username: 'katie',
  5.     password: '35c0cd1ecbbb68c75498b83c4e79fe2b'
  6.   }
  7. };
Plain objects are used so that the actions are serializable and can be replayable into the application state. Even if your actions involve asynchronous logic, the final dispatched action will remain a plain JSON object.

To simplify action creation, you can create a factory function to take care ofthe repeating parts within your application:

app/store/createAction.ts

  1. import {Action} from '@ngrx/store';
  3. export function createAction(type, payload?): Action {
  4.   return { type, payload };
  5. }

The resulting creation of the LOGIN_SEND action becomes much more succinct and cleaner:

  1. const loginSendAction: Action = createAction('LOGIN_SEND', {
  2.   username: 'katie',
  3.   password: '35c0cd1ecbbb68c75498b83c4e79fe2b'
  4. });

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