我们从 Action 名称开始。
解决 Action 名称冲突问题
在 ngRx 中，不同的 Action 需要一个 Action Type 进行区分，一般来说，这个 Action Type 是一个字符串，如何定义和使用这个字符串是需要首先考虑的问题。需要保证不同的 Action 名称不能冲突，使用的时候还需要方便，编码的时候，最好有提示等等。
首先处理命名冲突问题，示例使用 util 中定义的一个字典来检查是否已经定义了一个 Action
app/util.ts
/** * This function coerces a string into a string literal type. * Using tagged union types in TypeScript 2.0, this enables * powerful typechecking of our reducers. * * Since every action label passes through this function it * is a good place to ensure all of our action labels * are unique. */ const typeCache: { [label: string]: boolean } = {}; export function type(label: T | ''): T { if (typeCache[ label]) { throw new Error(`Action type "${label}" is not unique"`); } typeCache[ label] = true; return label; }
使用 TypeScript 的 Playground 翻译一下，可以得到如下的结果：
var typeCache = {}; function type(label) { if (typeCache[label]) { throw new Error("Action type \"" + label + "\" is not unique\""); } typeCache[label] = true; return label; }
可以更加直观地看到，这个 type 函数可以接收一个字符串，在类型缓存对象 typeCache 中检查是否已经设置过这个 Key, 如果已经设置过一次，抛出异常，这样可以避免命名冲突问题。如果没有，则将这个 Action Type 保存为缓存对象的键，值设置为 true. 最后返回这个 Action Type 的字符串。特别需要注意的是它已经被作为一个类型返回了。
使用 String Literal Type 实现 Action 名称的强类型化
具体的 Action Type 有哪些呢？它们分别定义在 /app/actions/books.ts，/app/actions/layouts.ts 和 /app/actions/collection.ts 中。
实现 Action 接口
然后，我们再看看 Action 接口的定义，它来自 @ngrx/store.
export interface Action {
readonly type: string;
}
这里是对一个 Action 基本的要求，需要一个字符串类型的 Action 名称。
为了便于使用每一种 Action ，使用了 Action Creator。以后可以直接使用这些 class 来创建 Action，而不用直接创建对象。这里定义了每种 Action 所对应的 Action 实现。例如 SearchAction 的实现如下所示：
/** * Every action is comprised of at least a type and an optional * payload. Expressing actions as classes enables powerful * type checking in reducer functions. * * See Discriminated Unions: https://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions */ export class SearchAction implements Action { type = ActionTypes.SEARCH; constructor(public payload: string) { } }
可以看到它的 Action 类型使用 ActionTypes 来定义，值固定设置为了 "[Book] Search"，可以通过构造函数传递这个 Action 所使用的附加数据。
ActionTypes 的定义如下所示，实际上是一个对象。我们通过属性来获取实际的值，这个值来自前面的 type 函数返回值。
/** * For each action type in an action group, make a simple * enum object for all of this group's action types. * * The 'type' utility function coerces strings into string * literal types and runs a simple check to guarantee all * action types in the application are unique. */ export const ActionTypes = { SEARCH: type('[Book] Search'), SEARCH_COMPLETE: type('[Book] Search Complete'), LOAD: type('[Book] Load'), SELECT: type('[Book] Select'), };
其它三种的 Action 以此类推。
我们先看看最后的 5 行。这里导出类型的别名。
这里使用了 TypeScript 中的 String Literal Types, 使得我们可以利用强类型的方式来使用字符串。
/** * Export a type alias of all actions in this action group * so that reducers can easily compose action types */ export type Actions = SearchAction | SearchCompleteAction | LoadAction | SelectAction;
代码实现
代码的全部内容如下所示。
import { Action } from '@ngrx/store';
import { Book } from '../models/book';
import { type } from '../util';
/**
* For each action type in an action group, make a simple
* enum object for all of this group's action types.
*
* The 'type' utility function coerces strings into string
* literal types and runs a simple check to guarantee all
* action types in the application are unique.
*/
export const ActionTypes = {
SEARCH: type('[Book] Search'),
SEARCH_COMPLETE: type('[Book] Search Complete'),
LOAD: type('[Book] Load'),
SELECT: type('[Book] Select'),
};
/**
* Every action is comprised of at least a type and an optional
* payload. Expressing actions as classes enables powerful
* type checking in reducer functions.
*
* See Discriminated Unions: https://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions
*/
export class SearchAction implements Action {
type = ActionTypes.SEARCH;
constructor(public payload: string) { }
}
export class SearchCompleteAction implements Action {
type = ActionTypes.SEARCH_COMPLETE;
constructor(public payload: Book[]) { }
}
export class LoadAction implements Action {
type = ActionTypes.LOAD;
constructor(public payload: Book) { }
}
export class SelectAction implements Action {
type = ActionTypes.SELECT;
constructor(public payload: string) { }
}
/**
* Export a type alias of all actions in this action group
* so that reducers can easily compose action types
*/
export type Actions
= SearchAction
| SearchCompleteAction
| LoadAction
| SelectAction;
然后是 /app/actions/layouts.ts.
import { Action } from '@ngrx/store';
import { type } from '../util';
export const ActionTypes = {
OPEN_SIDENAV: type('[Layout] Open Sidenav'),
CLOSE_SIDENAV: type('[Layout] Close Sidenav')
};
export class OpenSidenavAction implements Action {
type = ActionTypes.OPEN_SIDENAV;
}
export class CloseSidenavAction implements Action {
type = ActionTypes.CLOSE_SIDENAV;
}
export type Actions
= OpenSidenavAction
| CloseSidenavAction;
以及 /app/actions/collection.ts 的定义。
import { Action } from '@ngrx/store';
import { Book } from '../models/book';
import { type } from '../util';
export const ActionTypes = {
ADD_BOOK: type('[Collection] Add Book'),
ADD_BOOK_SUCCESS: type('[Collection] Add Book Success'),
ADD_BOOK_FAIL: type('[Collection] Add Book Fail'),
REMOVE_BOOK: type('[Collection] Remove Book'),
REMOVE_BOOK_SUCCESS: type('[Collection] Remove Book Success'),
REMOVE_BOOK_FAIL: type('[Collection] Remove Book Fail'),
LOAD: type('[Collection] Load'),
LOAD_SUCCESS: type('[Collection] Load Success'),
LOAD_FAIL: type('[Collection] Load Fail'),
};
/**
* Add Book to Collection Actions
*/
export class AddBookAction implements Action {
type = ActionTypes.ADD_BOOK;
constructor(public payload: Book) { }
}
export class AddBookSuccessAction implements Action {
type = ActionTypes.ADD_BOOK_SUCCESS;
constructor(public payload: Book) { }
}
export class AddBookFailAction implements Action {
type = ActionTypes.ADD_BOOK_FAIL;
constructor(public payload: Book) { }
}
/**
* Remove Book from Collection Actions
*/
export class RemoveBookAction implements Action {
type = ActionTypes.REMOVE_BOOK;
constructor(public payload: Book) { }
}
export class RemoveBookSuccessAction implements Action {
type = ActionTypes.REMOVE_BOOK_SUCCESS;
constructor(public payload: Book) { }
}
export class RemoveBookFailAction implements Action {
type = ActionTypes.REMOVE_BOOK_FAIL;
constructor(public payload: Book) { }
}
/**
* Load Collection Actions
*/
export class LoadAction implements Action {
type = ActionTypes.LOAD;
constructor() { }
}
export class LoadSuccessAction implements Action {
type = ActionTypes.LOAD_SUCCESS;
constructor(public payload: Book[]) { }
}
export class LoadFailAction implements Action {
type = ActionTypes.LOAD_FAIL;
constructor(public payload: any) { }
}
export type Actions
= AddBookAction
| AddBookSuccessAction
| AddBookFailAction
| RemoveBookAction
| RemoveBookSuccessAction
| RemoveBookFailAction
| LoadAction
| LoadSuccessAction
| LoadFailAction;
总结
- Action 的名称使用了 String Literal Type 来实现强类型支持
- 针对每种 Action 实现了 Action 接口，其中固定了所对应的 Action 类型，使用中不必再提供这个 Action 串，实际上是 Action Creator。
- 对于应用中常见的大量 Action 名称冲突问题，通过 type 函数解决，这个函数将会缓存已经定义的 Action 类型。
参考资源：
- ngrx/store in GitHub
- ngrx/example-app in GitHub
- ngRx 官方示例分析 - 1. 介绍
上一篇：ngRx 官方示例分析 - 1. 介绍
下一篇：ngRx 官方示例分析 - 3. reducers