Question

我正在审核example application provided by NgRx的代码。我注意到示例应用程序中的每个reducer函数都有一个返回值，该返回值由该特定reducer的State接口键入。例如，书籍减速器具有以下代码：

export interface State {
  ids: string[];
  entities: { [id: string]: Book };
  selectedBookId: string | null;
}

export const initialState: State = {
  ids: [],
  entities: {},
  selectedBookId: null,
};

export function reducer(
  state = initialState,
  action: book.Actions | collection.Actions
): State {

后来，我正在阅读Oren Farhi撰写的一本名为Reactive Programming with Angular and NgRx的NgRx的书，并且遇到了一个代码片段，显示了reducer函数的常见体结构（第24-25页）。 common结构显示reducer函数的返回值由ActionReducer键入State作为类型参数（在这种情况下称为SomeInterface而不是State）：

export interface SomeInterface {
  items: Item[],
  filter: string
}

let initialState: SomeInterface = {
  items: [],
  filter: ''
}

export function MyReducer (
  state: SomeInterface = initialState,
  action: Action
): ActionReducer<SomeInterface> {

为什么一个代码示例使用State而另一个使用ActionReducer和State作为reducer函数返回值的类型参数？为什么选择其中一个功能签名而不是另一个呢？每个服务的目的是什么？

本书是针对NgRx 2.2.1编写的，而示例应用程序是针对最新版本的NgRx（版本4.1.1。）我猜测返回类型的差异不能简单地通过NgRx版本的差异来解释，因为最新版本的NgRx也有ActionReducer。

谢谢！

Answer 1

ActionReducer是reducers的集合，在导入期间传递给StoreModule

Reducer应始终返回初始状态的类型（在您的情况下为SomeInterface）

export interface SomeInterface{
   ....
}
const initialState: SomeInterface= {
   ....
};
export function reducer(state = initialState, action: Actions): SomeInterface{...}

ActionReducer应该是reducers的集合，它需要一个类型接口，它将是应用程序的app store接口，这个集合被称为 Reducer Factory
```
export const reducers: ActionReducerMap<AppStore> = {
       someInterfacerSlice: someInterface.reducer,
};
```

为模块定义全局应用商店界面，如下所示

export interface AppStore {
      someInterfaceSlice: SomeInterface;
      stateSlice: StateSlice;
}

State vs ActionReducer <state>为NgRx reducer返回类型

1 个答案: