Структурируйте ngrx, используя angularfire2 с stateChanges ()

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

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

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

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

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


firebase google-cloud-firestore angular angularfire2 ngrx
person Luiz Ricardo Cardoso    schedule 13.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Извините, но это не лучший вариант. С помощью управления состоянием (шаблон сокращения) и, следовательно, 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 архитектура вашего приложения потеряет часть интереса и своей мощности.

person Thierry Falvo    schedule 08.07.2019