angular - 将大 reducer 拆分为更小的 reducer

Question

我有一个叫做 animals 的特征缩减器(切片缩减器)。我想将这些 reducer 拆分为哺乳动物、鸟类、鱼类等。这部分很简单，因为我可以简单地使用 ActionReducerMap。

现在假设哺乳动物的 reducer 状态很大，我想将其拆分为几个较小的 reducer，即猫的家族、狗的家族等。ActionReducerMap 不返回 reducer 并且不可嵌套。我尝试在网上搜索解决方案或示例，但找不到。简而言之，我的问题是如何制作多层嵌套的 reducer。

export interface AnimalsState{
  mammals: fromMammals.mammalsState;
  birds: fromBirds.birdsState;
}

export const reducers: ActionReducerMap<AnimalsState> = {
  mammals: fromMammals.reducer,
  birds: fromBirds.reducer
};

我想将哺乳动物 reducer 拆分成更小的 reducer 。

Answer 1

你可以使用 combineReducers 组合一个新的 reducer 来自 @ngrx/store 的函数，这将允许您将 dogs 和 cats reducers 组合为 mammals 状态.

我在 stackblitz 上做了一个如何使用它的简单示例.

combineReducers 函数的示例可以在 app/store/mammals/mammals.reducer.ts 中找到:

import { combineReducers } from '@ngrx/store';

import { catsStoreName, catsReducer, CatsState } from '../cats';
import { dogsStoreName, dogsReducer, DogsState } from '../dogs';


export type MammalsState = {
  [catsStoreName]: CatsState,
  [dogsStoreName]: DogsState,
}

export const mammalsReducer = combineReducers<MammalsState>({
  [catsStoreName]: catsReducer,
  [dogsStoreName]: dogsReducer,
});