Структура ngrx с использованием angularfire2 с помощью stateChanges ()

Question

Могу ли я иметь коллекцию сущностей внутри сущности, используя Ngrx - Entity Adapter ?

Мне нужно создать коллекцию сущностей внутри сущности, как я могу сделать это с помощью NgRxс Cloud Firestore?

Я знаю, что мог бы создать массив внутри документа Pizza, но я хочу сделать это, используя масштабируемость Cloud Firestore, потому что я хочу выполнять функции с динамическими облачными функциями.

Я хочу что-то вроде того, что есть в этом Изменении состояния AngularFire2 с уроком Ngrx , но я хочу иметь для каждой пиццы начинки, которые должны оставаться в состоянии пиццы в каждой сущности.

Пути к облачным хранилищам:

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?Если кто-нибудь может помочь мне, как я могу это сделать, я буду очень благодарен за это, это очень важно для меня !!!

Answer 1

Извините, но это не очень хорошая практика. С управлением состоянием (шаблон избыточности) и, следовательно, ngrx, вы должны нормализовать свой магазин.

Рекомендую прочитать для шаблона Redux .

Это означает, что в вашем случае у вас должна быть выделенная 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 вы сможете получить список topppings для выбранного pizza:

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];
});

Если вы действительно хотите повторить этот общий шаблон и передовой опыт, вы всегда можете рассмотреть вопрос об обновлении pizza сущности каждый раз, когда добавляется topping. Но это обновит весь entity.

Еще раз, это будет работать, но state management архитектура вашего приложения потеряет часть своего интереса и мощности.