6

我希望对来自我的服务器的数据进行规范化，以便我可以更轻松地与 ngrx/entity 一起使用它。

我喜欢ngrx/entity 如何通过提供EntityState 接口和EntityAdapter 来降低reducers 和其他东西的复杂性。但是我发现它不适用于嵌套数据。

我有 3 个级别的数据：

训练 -> 练习 -> 套装

如果我将它与经典的 ngrx/entity 模式一起使用，当我使用嵌套数据时，它会很快变得拥挤。

下面是我在使用 ngrx/entity 时遇到的第一件事 当我将所有训练数据放入其中时，这就是数据被标准化的方式 在那之后我窥探并进入了 normalizr 库 输出 ，我喜欢 normalizr 如何规范化我的数据，并且还用只有 id 作为其他实体（练习、集合）的键替换嵌套数组值

我首先尝试的是像这样组合多个实体状态： 实体状态 但这需要更改我的服务器以及大量的逻辑和努力。

我想要以某种方式将 normalizr 与 ngrx/entity 结合起来。获得 normalizr 给我的同样的东西，但可以自由地使用来自ngrx/entity的实体适配器api，它是选择器和其他来自ngrx/entity为我服务的代码

所以底线我的问题是如何在没有某种服务器工作的情况下使用ngrx/entity（就像normalizr库一样）规范化深层嵌套数据。

4

3 回答 3

5

所以我在仍然使用 NGRX 的同时找到了一些解决方法

在我开始之前，我只想说ngrx 也有提供更少样板的ngrx/data pack。但是，当我阅读它时，我找到了对我的问题的明确答案：

https://ngrx.io/guide/data/limitations “这个库浅克隆集合中的实体数据。它不会克隆复杂、嵌套或数组属性。您必须进行深度相等测试和在请求 NgRx Data 保存数据之前克隆自己。”

我相信这对于 ngrx/entity 也是如此。

我开始寻找替代解决方案：BreezeJs、NGXS、Akita，我发现 NGXS 对我来说很快就能理解，但需要努力将我的 ngrx 实现与项目分离。

所以我回到ngrx并尝试为3级深度嵌套数据做一个解决方法

创建 3 个独立的实体状态（我将尝试使用可以减少所有样板的 ngrx/data）

创建一个函数，该函数将为每个实体返回所有必要的实体和 ID（使用 normalizr 进行规范化）

export function normalizeTrainingArray(trainings: Training[]) {
var normalized = normalize(trainings, trainingsSchema);

var entities = {
    trainings: {},
    exercises: {},
    sets: {}
}
entities.trainings = normalized.entities.trainings ? normalized.entities.trainings : {};
entities.exercises = normalized.entities.exercises ? normalized.entities.exercises : {};
entities.sets = normalized.entities.sets ? normalized.entities.sets : {};

var ids = {
    trainingIds: [],
    exerciseIds: [],
    setIds: []
}
ids.trainingIds = normalized.entities.trainings ? Object.values(normalized.entities.trainings).map(x => x.id) : [];
ids.exerciseIds = normalized.entities.exercises ? Object.values(normalized.entities.exercises).map(x => x.id) : [];
ids.setIds = normalized.entities.sets ? Object.values(normalized.entities.sets).map(x => x.id) : [];

return {
    entities,
    ids
}

这样的事情就足够了。发送 normalizeData 动作并使用效果来调用此方法并为 fetchedData 调度 3 个不同的动作...

类似于以下内容：

   trainingsNormalized$ = createEffect(() =>
    this.actions$.pipe(
        ofType(TrainingActions.normalizeTrainings),
        tap(payload => {

            var normalized = normalizeTrainingArray(payload.trainings);

            this.store.dispatch(TrainingActions.trainingsFetched({ entities: normalized.entities.trainings, ids: normalized.ids.trainingIds }))
            this.store.dispatch(ExerciseActions.exercisesFetched({ entities: normalized.entities.exercises, ids: normalized.ids.exerciseIds }))
            this.store.dispatch(SetActions.setsFetched({ entities: normalized.entities.sets, ids: normalized.ids.setIds }))
        })
    )
    , { dispatch: false });

在一个样本缩减器中：

    // GET ALL
on(TrainingActions.trainingsFetched, (state: TrainingState, payload: { entities: Dictionary<Training>, ids: string[] }) => {
    return {
        ...state,
        entities: payload.entities,
        ids: payload.ids
    }
}),

结果是：

结果

于 2019-09-14T19:22:20.737 回答
1

@ngrx/entity不提供标准化数据的方法。您可以将 normalizr 与 结合使用@ngrx/entity，例如，您可以在 Angular 服务/NgRx Effect/NgRx reducer 中规范化您的数据。

Redux 文档在https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape有一些关于使用规范化器和 redux 的页面。

于 2019-09-09T16:52:18.807 回答
0

我认为有2个解决方案

  1. 使用https://github.com/paularmstrong/normalizr标准化您的数据

  2. 使用https://ngrx.io/guide/entity/adapter#adapter-collection-methods映射函数进行深度克隆。

return adapter.map(
  entity => entity.id == obj.id ? {...entity, foo: 'bar'} : entity, 
  state
);

或者你可以使用https://immerjs.github.io/immer/docs/introduction来处理这个

return adapter.map(
  entity => entity.id == obj.id ? produce(entity, (draft: any) => { draft.foo = 'bar' }) : entity, 
  state
);
于 2020-05-15T20:44:56.773 回答