โครงสร้าง ngrx โดยใช้ angularfire2 พร้อม stateChanges ()

ฉันสามารถมีคอลเลกชันของเอนทิตีภายในเอนทิตีโดยใช้ Ngrx - Entity Adapter ได้ไหม

ฉันต้องการสร้างคอลเลกชันของเอนทิตีภายในเอนทิตี ฉันจะทำสิ่งนี้โดยใช้ NgRx กับ Cloud Firestore ได้อย่างไร

ฉันรู้ว่าฉันสามารถสร้างอาร์เรย์ภายในเอกสาร Pizza ได้ แต่ฉันต้องการทำสิ่งนี้โดยใช้ความสามารถในการปรับขนาดของ Cloud Firestore เพราะฉันต้องการใช้งานฟังก์ชันด้วยฟังก์ชันคลาวด์แบบไดนามิก

ฉันต้องการบางอย่างเช่นสิ่งที่อยู่ใน AngularFire2 State Changex ด้วย 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

ฉันขอโทษ แต่นั่นไม่ใช่แนวทางปฏิบัติที่ดีในการทำเช่นนั้น ด้วยการจัดการสถานะ (รูปแบบ redux) และด้วยเหตุนี้ 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