Daten hinzufügen/entfernen in Redux/Reagieren mit Lodash

Question

Ich habe eine Tabelle mit Kontrollkästchen. Wenn ein Benutzer ein Kontrollkästchen auswählt, wird die ID an einen Aktionsersteller gesendet.

Component.js

handlePersonSelect({ id }, event) { 
    const { selectPerson, deselectPerson } = this.props; 
    event.target.checked ? selectPerson(id) : deselectPerson(id); 
} 

action.js

export function selectPerson(id) { 
    console.log("selected") 
    return { 
    type: SELECT_PERSON, 
    payload: id 
    }; 
} 

export function deselectPerson(id) { 
    return { 
    type: DESELECT_PERSON, 
    payload: id 
    }; 
} 

Ich bin in der Lage den ganzen Weg zu gehen, bis zu diesem Schritt, an dem ich bin verloren: Dies ist der säumige code:

import { 
    SELECT_PERSON, 
    DESELECT_PERSON, 
    FETCH_PEOPLE 
} from '../actions/types'; 


const INITIAL_STATE = { people:[], selectedPeople:[]}; 

export default function(state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case FETCH_PEOPLE: 
     return {...state, people: action.payload.data}; 
    case SELECT_PERSON: 
     return [action.payload, ...state ]; 
    case DESELECT_PERSON: 
     return _.without({state, selectedPeople:action.payload}); 
    } 
    return state; 
} 

Der selectedPeople-Status sollte die IDs basierend auf jedem Fall addieren/subtrahieren. Jedes Mal, wenn ich die ID abnehme, verschwindet mein gesamter "People" -Tisch.

Answer 1

Sie sollten den vollständigen Zustand aus dem Druckminderer in allen Fällen zurückkehren, so:

export default function(state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case FETCH_PEOPLE: 
     return {...state, people: action.payload.data}; 
    case SELECT_PERSON: 
     return {...state, selectedPeople: [ ...state.selectedPeople, action.payload]}; 
    case DESELECT_PERSON: 
     return {...state, selectedPeople: _.without(state.selectedPeople, action.payload)}; 
    default 
     return state; 
    } 
} 

Beachten Sie auch, Sie keine DESELECT_PERSON Aktion, sondern 2 SELECT_PERSON Aktionen hatte. Möglicherweise ein Tippfehler.