Doppelte Elemente im Redux-Statusbaum

Question

Ich versuche, meinen Redux-Status mit einem Umschaltknopf zu aktualisieren. Mein LB Reducer besteht aus 2 Reducern, einem Array namens listItems für die Anzeige einer eindeutigen Anzahl von Werten und filterBarState, das als Referenz für die aktuellen Filter verwendet wird.

Während mein Ausgangszustand korrekt ist, stellt meine Minderer die Aktion Toggle außerhalb von filterBarState

Unten finden Sie meine LB Objekt Minderer

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case EVENT_FILTER_PRESSED: 
     return { 
     // Reducer composition 
     filterBarState: eventFilter(state.filterBarState, action), 
     listItems: eventItems(state.listItems, action) 
     }; 
    case MALE_FILTER_PRESSED: 
     // console.log('isMaleFilterOn:', action.isMaleFilterOn) 
     return { ...state, isMaleFilterOn: action.isMaleFilterOn }; 
    case FEMALE_FILTER_PRESSED: 
     // console.log('isFemaleFilterOn:', action.isFemaleFilterOn) 
     return { ...state, isFemaleFilterOn: action.isFemaleFilterOn }; 

In meinem Reagieren Mutter Container Komponente, ich habe einige versucht (suspect) ES6-Destrukturierung in mapStateToProps, die, wenn ich nicht die gesamte

const mapStateToProps = ({ LB }) => { 

    const { filterBarState: { isMaleFilterOn, isFemaleFilterOn, currentSelectedEvent, currentSelectedRow }, listItems, isCurrentlySelected } = LB; 

    return { isMaleFilterOn, isFemaleFilterOn, currentSelectedEvent, currentSelectedRow, listItems, isCurrentlySelected }; 

enthält

Alle Tipps/Vorschläge zu einer Korrektur würden sehr geschätzt werden!

Answer 1

Basierend auf der EVENT_FILTER_PRESSED Handler, sieht es so aus, als ob Sie die isMaleFilterOn und isFemaleFilterOn nicht auf der richtigen Ebene aktualisieren. Versuchen Sie folgendes:

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case EVENT_FILTER_PRESSED: 
     return { 
     // Reducer composition 
     filterBarState: eventFilter(state.filterBarState, action), 
     listItems: eventItems(state.listItems, action) 
     }; 
    case MALE_FILTER_PRESSED: 
     // console.log('isMaleFilterOn:', action.isMaleFilterOn) 
     return { ...state, filterBarState: { ...state.filterBarState, isMaleFilterOn: action.isMaleFilterOn } }; 
    case FEMALE_FILTER_PRESSED: 
     // console.log('isFemaleFilterOn:', action.isFemaleFilterOn) 
     return { ...state, filterBarState: { ...state.filterBarState, isFemaleFilterOn: action.isFemaleFilterOn } }; 
}