Ändern Array von Objekten in Redux Auswuchten Zustand

Question

In meiner Redux App habe ich eine Reihe von Objekten, die Liste der Tage & Stunden geöffnet Geschäft darstellt, der wie folgt aussieht:

[{day: 'Monday', from:'10', to:'18'}, {day: 'Tusday', from: '8', to:'16'}, {...}] 

ich eine Komponente erstellt haben, enthält eine Liste von Tagen in einer Woche. Wenn auf eine von Tagen Wenn Sie auf einen Versand mit Nutzlast, das ist erfolgt einen Tag darstellt:

{day: 'Monday', from:'10', to:'18'} 

ich auf ein leeres Array zu starten, schiebe ich ein dayObject mit dem Array. Wenn ich dasselbe Objekt erneut drücke, bedeutet dies, dass ich es entfernen möchte (deaktivieren Sie es auf der React-Komponente).

Wenn ich öffnende Stunde in einem DayObject ändere, dränge ich es wieder, mit geänderter Öffnungsstunde, also möchte ich altes Objekt entfernen und das neue in Array mit neuer Stunde schieben.

if(_.some(days, 
    { 
     day: action.payload.day 
    } 
)) { 
    // replace current object, how ? 

    } 

    if(_.some(days, 
    { 
     day: action.payload.day, 
     from: action.payload.from, 
     to: action.payload.to 
    } 
)) { 
    // duplicate, uncheck on UI so remove it 
    _.remove(days {day: action.payload.day}) 
    } else { 
    days.push(action.payload) 
    } 

So sieht es aus wie meine Probleme legt bei der Erkennung, ob das Objekt ein Duplikat ist oder es sich um eine modifizierte Version eines dayObject, also sollte ich es ersetzen. Irgendeine Hilfe ?

Answer 1

Zuerst können Sie eine Aktion im Format {type: 'ACTION_TYPE', ...} versenden. Dies gibt Ihnen die Möglichkeit, den Aktionstyp anzugeben, um Ihren Reduzierer anzuweisen, wie mit der Nutzlast zu arbeiten ist. Ich würde mir Aktionen wie {type: 'REMOVE_DAY', day: {}} und {type: 'UPDATE_HOUR', day: {}} vorstellen.

Eine weitere wichtige Sache ist, Ihr Modell und Ihre Datenstruktur zu verstehen. Zum Beispiel, wird es besser sein, ein Objekt mit ID anstelle von einfachen Array zu verwenden? Auf diese Weise können Sie sich auf Ihre Tage beziehen, indem Sie id verwenden, anstatt das gesamte Objekt herumzugeben.

// Example reducer 
const store = (state, action)=> { 
    switch (action.type) { 
    case 'ADD_DAY': 
     return [...state, action.payload]; 
    case 'REMOVE_DAY': 
     return state.filter((date)=>(date.day !== action.payload.day)); 
    case 'UPDATE_DAY': 
     return state.map((date)=>{ 
     if (date.day === action.payload.day) { 
      return {...date, ...action.payload}; 
     } 
     return date; 
     }); 
    default: 
     return state; 
    } 
} 

// Example action creator 
const updateDay = (payload)=>{ 
    return { 
    type: 'UPDATE_DAY', 
    payload 
    } 
}