Wie kann man Mehrfachauswahl in react mit redux hervorheben?

Question

Ich versuche, mehrere Auswahl und markieren Sie sie. Angenommen, ich zeige 5 Schaltflächen an und wenn der Benutzer auf eine Schaltfläche klickt, wird er hervorgehoben und wenn der Benutzer erneut darauf klickt, wird es normal.

Ich benutze redux speichern den Zustand meiner Taste. Diese Schaltflächen werden dynamisch basierend auf ihrer Anzahl erstellt.

Redcuer

CurrentReducer(state = {court:{}}, action){ 
    switch (action.type){ 
    case 'COURT_SELECTED':{ 
      return {...state, 
      court: action.payload 
      } 
     }} 

Dispatcing Aktion auf onClick

this.props.dispatch(actions.selected({type:'COURT_S', payload: id})) 

hatte ich gedacht, von ids vor Gericht zu speichern, indem sie es als ein Array zu machen oder mit wahr oder falsch in einem Objekt zu speichern id. kann mir jemand eine einfache Arbeitslösung geben, die

Answer 1

super einfach

Sie etwas tun können:

reduser

const selectedCourts = (state = {}, action) => { 
    switch (action.type) { 
    case 'COURT_TOGGLE': { 
     return { 
     ...state, 
     [action.id]: !state[action.id] 
     }; 
    } 
    } 
    return state; 
}; 

Aktion

dispatch({type: 'COURT_TOGGLE', id}); 

So Sie Ich werde ein Stück wie diesen haben:

selectedCourts: { 
    1: true, 
    2: false, 
    3: false, 
    ... 
    } 

Ich empfehle Ihnen combineReducers zu benutzen, um Ihre Minderer in kleinere Teile aufgeteilt, so dass jeder subreducer ein einfaches Teil Ihres Staates wie ein Array oder eine Ebene Objekt oder boolean Variable behandeln würde.

CurrentReducer.js

export default combineReducers({ 
    selectedCourts, 
    ... 
});