将大减速机拆分为更小的减速机

Udi*_*zor 7 typescript ngrx angular ngrx-store

我有一个称为动物的功能减速器(切片减速器)。我想将这些减速器拆分为哺乳动物、鸟类、鱼类等。这部分很简单,因为我可以简单地使用ActionReducerMap.

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

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

export const reducers: ActionReducerMap<AnimalsState> = {
  mammals: fromMammals.reducer,
  birds: fromBirds.reducer
};
Run Code Online (Sandbox Code Playgroud)

我想将哺乳动物减速器拆分为更小的减速器。

cyr*_*r_x 6

您可以使用来自 的combineReducers函数组成一个新的reducer,这将允许您将您的reducer和reducer@ngrx/store组合起来用于状态。dogscatsmammals

我做了一个关于如何在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,
});
Run Code Online (Sandbox Code Playgroud)

  • 它是一个计算/动态属性名称,例如“catsStoreName”变量的值。我用它就不用一遍又一遍地写店名了。 (2认同)