Eckig/Redux korrekte Art, den Staat zu halten

Question

Ich baue eine Einkaufswagen App mit Angular + Redux. Ich habe ein Array von Objekten (Produkte in meinem Warenkorb), die jeweils Schnittstelle: haben

export interface IProduct { 
    id: number; 
    description: string; 
    isAdded: boolean; 
} 

Die Produkte auf der Seite eine Schaltfläche In der Warenkorb

<div class="addBtn" (click)="addToCart(prod)"> 
    <span class="unaddedItem" *ngIf="!prod.isAdded; else added">Add to cart</span> 
    <ng-template> 
     <span class="addedItem" #added>In cart</span> 
    </ng-template> 
</div> 

Was ich will, ist zu ändern In den Einkaufswagen hinzufügen Text mit In Warenkorb, wenn ein Produkt hinzugefügt wird. Ich habe es erfolgreich mit dem Rxjs, aber wenn ich die Produkten Seite verlassen, und dann, um es zurück, meine In Warenkorb Spanne für die hinzugefügten Produkte verloren (In dem Warenkorb wieder gezeigt). Also, ich denke, Redux ist der einzige Weg, um mir zu helfen, den Staat zu halten.

Ich schrieb eine Reducer-Funktion mit einigen Aktionen. Hier ist einer von ihnen:

export function rootReducer(state, action){ 
    switch(action.type){ 
     case ADD_PRODUCT: 
      action.product.id = state.products.length + 1; 
      return Object.assign({}, state, { 
       products: state.products.concat(Object.assign({}, action.product)) 
      }) 
    } 
} 

Also, meine Frage Was ist der richtige Weg, um den Zustand eines Objekts zu halten, nachdem es in dem Warenkorb hinzufügen? Sollte ich die gleiche ADD_PRODUCT Aktion für das, oder sollte ich eine andere Aktion schreiben, sagen wir, MARK_ADDED und es für ein anderes Array von hinzugefügten Objekte verwenden? So mit zwei verschiedenen Arrays für Im Warenkorb Produkte und Markiert hinzugefügt Produkte, wo ich die hinzugefügten Objekte und ihren Zustand entsprechend halten?

Answer 1

Zunächst einmal würde ich diese Logik zu Ihrem rootReducer hinzufügen. Remember, your reducers mimic the shape of your data. Der Status sollte von Ihrem rootReducer zu den einzelnen Statusabschnitten gehen. Im folgenden Beispiel möchten Sie idealerweise einen rootReducer, der Ihren gesamten Status zurückgibt. Ein Produkte- und Einkaufswagenreduzierer, der by_id und all_ids usw. zurückgibt, bis die gesamte Datenstruktur erstellt ist.

Für Ihren Warenkorb und Produkt, würde ich eher geneigt sein, etwas in dieser Richtung zu haben:

{ 
    products: { 
    by_id: { 
     1: { 
     id: 1, 
     name: "hairdryer", 
     price: "2.99", 
     in_cart: true 
     }, 
     2: { 
     id: 2, 
     name: "brush", 
     price: "299.99", 
     in_cart: false 
     } 
    }, 
    all_ids: [1, 2] 
    }, 
    cart: { 
    products_added: [1], 
    saved: false, 
    some_data: "foo" 
    } 
} 

Dadurch wird die Struktur in den doc Beispiele gelegt folgt. Wenn eine add_to_cart Aktion ausgelöst wird, wird ihr Objekt durch jeden Reduzierer geleitet, die Produkte sehen diese Daten sowie den Warenkorb. Wie in der Dokumentation gezeigt, würde ich nur eine Switch-Anweisung in Ihrem in_cart Reducer in Produkte und products_added Reducer im Warenkorb verwenden.

---

Es ist auch eine schlechte Übung, Ihre UUID-Zuweisung in Ihrem Reducer hinzuzufügen. Die Aufgabe eines Reducers besteht darin, einfach zu definieren, wie sich der Status ändert, und nicht zu definieren, um welchen Status es sich handelt. Mach das in deiner Aktion oder in der Middleware.

---

Ich würde auch geneigt sein, die ganze Aktion durch Ihren Zustand nur ein Schlüssel im Gegensatz zu passieren. Auf diese Weise müssen Sie nicht umgestalten, wenn Sie in Ihrem Zustand einen weiteren Teil Ihrer Aktion benötigen.