使用 angularfire2 和 stateChanges () 构造 ngrx答案

【问题标题】：Structure ngrx using angularfire2 with stateChanges ()使用 angularfire2 和 stateChanges () 构造 ngrx
【发布时间】：2019-06-13 11:36:48
【问题描述】：

我可以使用Ngrx - Entity Adapter 在一个实体中拥有一组实体吗？

我需要在一个实体中创建一个实体集合，如何将 NgRx 与 Cloud Firestore 结合使用？

我知道我可以在 Pizza 文档中创建一个数组，但我想使用 Cloud Firestore 的可扩展性来执行此操作，因为我想使用动态 Cloud Functions 执行功能。

我想要类似于 AngularFire2 State Changex With Ngrx 课程中的内容，但我希望每个 Pizza 的浇头应保持在每个实体的 Pizzas 状态内。

Cloud Firestore 路径：

PathRefPizzas：pizzas/{pizaId};

PathRefToppings：pizzas/{pizaId}/toppings/{toppingId};

export function pizzasReducer(
    state: PizzaState = initialState,
    action: ActionPizza) {

switch (action.type) {

    case actionsPizza.PIZZA_ADDED: {
        return unidadeAdapter.addOne(action.payload, state)
    };

    case actionsPizza.PIZZA_MODIFIED:
        return pizzaAdapter.updateOne({
            id: action.payload.id,
            changes: action.payload
        }, state)

    case actionsPizza.PIZZA_REMOVED:
        return pizzaAdapter.removeOne(action.payload.id, state)

    case actionsPizza.TOPPING_ADDED: {
        // Here I need to add Toppings inside a Pizza entity in which it belongs.
        return toppingsAdapter.addOne(action.payload, state);
    }

    default:
        return state;
}

状态中的数据应该如下。

pizzas: {
    ids: [...]
    entities: [
        {'pizza1': {id: 'pizza1, name: 'Pizza 1', toppings: [...]},
        {'pizza2': {id: 'pizza2, name: 'Pizza 2', toppings: [...]}
        {'pizza3': {id: 'pizza3, name: 'Pizza 3', toppings: [...]}
        {'pizza4': {id: 'pizza4, name: 'Pizza 4', toppings: [...]}
        {'pizza5': {id: 'pizza5, name: 'Pizza 5', toppings: [...]}
    ];
}

我将如何使用 ngrx 状态管理来做到这一点？如果有人可以帮助我如何做到这一点，我将非常感激，这对我来说非常重要！！！

【问题讨论】：

标签： angular firebase google-cloud-firestore angularfire2 ngrx

【解决方案1】：

很抱歉，这样做不是一个好习惯。使用状态管理（redux 模式）和ngrx，您应该规范您的商店。

Recommend read for Redux pattern.

这意味着，在您的情况下，您应该有一个专用的 ngrx entity 用于您的 Topping 模型。

您的商店应如下所示：

state {
  pizzas: {
    ids: [...]
    entities: [
        {'pizza1': {id: 'pizza1, name: 'Pizza 1', ...},
        {'pizza2': {id: 'pizza2, name: 'Pizza 2', ...},    
    ];
  },
  toppings: {
    ids: [...]
    entities: [
        {'topping1': {id: 'topping1, pizzaId: 'pizza1', name: 'Topping 1', ...},
        {'topping2': {id: 'topping2, pizzaId: 'pizza1', name: 'Topping 2', ...},    
    ];
  }
}

然后通过selectors，您将能够检索所选pizza 的topppings 列表：

getToppings = createSelector(getSelectedPizzaId, getAllToppings, (state, selectedPizzaId, allToppings) => {
  return allToppings.filter(topping => topping.pizzaId === selectedPizzaId)
});

为了获得更好的性能，您还可以考虑创建一个可选的第三个entity 专用于pizza 和toppings 之间的关系：

store {
  ...
  pizzaToppingIds {
    entities: [
      {'pizza1': { toppingIds: ['topping1', 'topping2']},
      {'pizza2': { toppingIds: ['topping3', 'topping4']},    
    ];
  }
}

在这种情况下，selector 应该是：（简化，缺少一些测试...）

getToppings = createSelector(getSelectedPizzaId, getPizzaToppingEntities, getToppingEntities, (state, selectedPizzaId, pizzaToppingEntities, toppingEntities) => {
  return pizzaToppingEntities[selectedPizzaId].toppingIds
    .map(id => toppingEntities[id];
});

如果您真的想再次采用这种常见模式和良好做法，您可以随时考虑在每次添加 topping 时更新 pizza 实体。但它会更新整个entity。

再一次，它会起作用，但您的应用程序的state management 架构将失去部分兴趣和功能。

【讨论】：