Update tief verschachtelten Zustand (normalisiert) in react redux

Question

Ich versuche, eine Flugsuche Anwendung in React/Redux, wo auf dem Hauptbildschirm alle meine Flug Ergebnisse angezeigt werden, und in der Seitenleiste, verschiedene Arten von Filtern als Kontrollkästchen werden angezeigt. (Als Beispiel siehe this example

Die Filter von Typen gruppiert sind, zB Abfahrtsstationen, Ankunft Stationen, Abfahrtszeiten usw. Alle Filterelemente in einem normalisierten verschachtelten Zustand erzeugt werden, wobei jedes Element die folgenden Eigenschaften aufweist:

"type": "airlines",   // this is the group type 
"checked": true,    // will be switched true or false 
"label": "Brittish Airways" // this is the display label 

Als ich eines des Kontrollkästchen klicken Sie in meiner React Ansicht, wird die folgende Aktion ausgelöst werden:

export function filterFlightOffers(item, index) { 
    return { 
     type: 'FILTER_FLIGHT_OFFERS', 
     grouptype, 
     id 
    } 
} 

ich meinen redux Minderer möchte den Zustand (Schalter geprüft Wert) und gibt den neuen Status aktualisieren (zB ich mmutabel). Wenn ich die Beispiele online betrachte, reagiere ich auf Lösungen wie Kopieren eines neuen Zustands mit einem Spreizoperator, z. ... das spezifische Element mit dem umgeschalteten überprüften Element, z. {[action.id]: aktiviert,! aktiviert}.

Aber ich kann es einfach nicht funktionieren, denke ich aufgrund der Tatsache, dass ich einen tiefen verschachtelten Zustand habe .. Daher entfernte ich die Aktion und Reducer-Komplexität und machte eine einfache jsfiddle, die nur eine neue unveränderlich Status 'geändert'

Gibt es jemanden, der mir helfen könnte?

http://jsfiddle.net/gzco1yp7/4/

Vielen Dank!

Answer 1

Wenn Ihr Zustand etwas wie folgt aussieht:

{  
    result: [1,2,3,4], 
    entities: { 
    searchitems: { 
     1: { 
     "type": "matchAirlines", 
     "checked": false, 
     "label": "Match airlines" 
     }, 
     2: { 
     "type": "airlines", 
     "checked": true, 
     "label": "Air France" 
     }, 
     3: { 
     "type": "airlines", 
     "checked": true, 
     "label": "Brittish Airways" 
     } 
    }, 
    counts: 
     1: { "count": 2001 }, 
     2: { "count": 579 }, 
     3: { "count": 554 } 
    } 
    } 
} 

... Ihr Minderer könnte wie folgt aussehen:

function reducer(state, action) { 

    switch (action.type) { 
    case 'FILTER_FLIGHT_OFFERS': 
     return { 
     ...state, 
     entities: { 
      ...state.entities, 
      searchItems: Object.keys(state.entities.searchItems).reduce((newItems, id) => { 
      const oldItem = state.entities.searchItems[id]; 
      if (oldItem.type === action.groupType) { 
       newItems[id] = { ...oldItem, checked: id === action.id }; 
      } else { 
       newItems[id] = oldItem; 
      } 
      return newItems; 
      }, {}) 
     } 
     }; 
    } 

    return state; 
} 

Dieses einfacher gemacht wird, wenn Sie combineReducers verwenden und ein Reduktions schaffen nur für Ihre searchItems. Und lodash kann auch Dinge vereinfachen:

import mapValues from 'lodash/mapValues'; 

function searchItemsReducer(state, action) { 

    switch (action.type) { 
    case 'FILTER_FLIGHT_OFFERS': 
     return mapValues(state, (oldItem, id) => (
     oldItem.type === action.groupType 
      ? { ...oldItem, checked: id === action.id }; 
      : oldItem 
    )); 
    } 

    return state; 
}