Preset redux store beim Aktualisieren verschiedener Komponenten

Question

Hier ist meine Reducer-Datei.

export default (state = initialState, action) => { 
switch (action.type) { 
case AppConstants.getMenuItems: 
    return { 
    ...state, 
    isLoading: true 
    } 
case AppConstants.getMenuItemsSuccess: 
    return { 
    ...state, 
    menu_items: action.menu_items, 
    menu_items_copy: action.menu_items, 
    unmapped: false, 
    isLoading: false 
    } 
case AppConstants.getAddonsItems: 
    return { 
    ...state, 
    isLoading: true 
    } 
case AppConstants.getAddonsItemsSuccess: 
    return { 
    ...state, 
    menu_items: action.addon_items, 
    isLoading: false 
    } 

    case AppConstants.showAllProducts: 
    return { 
    ...state, 
    menu_items: state.menu_items, 
    unmapped: false 
    } 

case AppConstants.getUnmappedMenuItemsSuccess: 
    return { 
    ...state, 
    unmapped: true, 
    menu_items_copy: state.menu_items, 
    menu_items: state.menu_items_copy.filter(data => { 
     data.productList = data.productList.filter(
     id => id.brandProductSkuList[0].productSKUId.length === 36, 
    ); 
     return data.productList.length !== 0; 
    }) 
    } 

Wenn ich jetzt auf unmapped Filter klicken zeigt es die gefilterten Daten aber nach unmapped wenn ich allProducts klicken es gibt immer noch die nicht zugeordneten Daten, da in unmap Funktion der Staat (menu_items) ist updated.So wie kann ich zeigen, die Originaldaten in allen Produkten. Und in meiner UI verwende ich (this.props.menu_items), also muss ich das nur aktualisieren. Was ich tun möchte, ist, wenn Kategorien angeklickt wird, sollte es alle Produkte anzeigen und nicht zugeordnet für das und ähnlich für Addons.

Answer 1

entfernte ich das nicht zugeordnete Funktionalität aus dem Druckminderer und legte sie in meiner Komponente als folgt-

render() { 
let count = 0; 
return (
    <div className="table" > 
    <div className="container" > 
     <div className="show-grid row"> 
     <div className="col-xs-3 head1">Products</div> 
     <div className="col-xs-3 head2">Variants</div> 
     <div className="col-xs-3 head3">P.S ID</div> 
     <div className="col-xs-3 head4">Updated</div> 
     </div> 
     {this.props.dataProp.length == 0 && 
     <div id="noproducts"> No Products Available</div> 
     } 
     {this.props.dataProp.map((data => { 
     let dataNew = JSON.parse(JSON.stringify(data)); 
     if (this.props.unmapped === true) { 
      dataNew.productList = dataNew.productList.filter(
      id => id.brandProductSkuList[0].productSKUId.length === 36 
     ); 
      if (dataNew.productList.length > 0) 
      return (<Category key={data.categoryName + uuidv4()} categoryData={dataNew} />); 
     } 
     else if (this.props.unmapped === false && data.productList.length > 0) { 
      return (<Category key={data.categoryName + uuidv4()} categoryData={data} />); 
     } 
     })) 
     } 
    </div> 
    </div > 
) 
} 

---

ich für unmap eine Fahne nahm die Produkte zu zeigen, wenn es falsch ist, und wenn es ist wahr.

Answer 2

Ich denke, Sie machen einen konzeptionellen Fehler beim Ändern menu_items auf nicht zugeordnete Artikel Anfrage. Es ist sehr nützlich, über Ihren redux-Speicher nachzudenken, als ob es eine Art althergebrachte SQL-Datenbank wäre, und diese entsprechend zu gestalten. Sie entfernen Zeilen, die nicht in einer select-Operation enthalten sein sollen, aus Ihrer Datenbank. Sie leben immer noch in einem Tisch, sie sind einfach nicht ausgewählt.

Gleiche Geschichte mit redux apps. Lassen Sie getMenuItemsSuccess der einzige Ort sein, wo menu_items tatsächlich mutiert sind. Dann wählen Sie eine der folgenden Möglichkeiten:

1. Einführung unmapped_items Feld in Ihrem Geschäft, das Update auf getUnmappedMenuItemsSuccess Aktion sein wird.
2. Selben aber tun Sie Ihre Filterung, nachdem Daten vom Back-End geladen werden. In diesem Fall wird getUnmappedMenuItemsSuccess nur die Quelle der Elemente wechseln, ohne zusätzliche Arbeit zu leisten.
3. Filtern Sie in Component Code.