Aktualisiere Zustand des Deep-Objekt-Wertes in React/Redux mit immutable.js

Question

Ich habe dieses ziemlich tief verschachtelte State-Array und muss das Stunden-Feld nach Mitarbeiter, Aufgabe und Woche aktualisieren. Ich habe zahlreiche Möglichkeiten versucht, dies mit Immutable zu tun, aber keinen Erfolg, keine Hilfe? Hier

ist ein Beispiel für meine Daten:

[{ 
    "Employee": "John Doe", 
    "Other Data": "test", 
    "Tasks": [{ 
    "AccessType": "Confidential", 
    "DueDate": "2016-02-26 23:59:59", 
    "taskId": "3", 
    "TaskTitle": "testTitle", 
    "Weeks": { 
     "2016-10-10": { 
     "Hours": "3" 
     } 
    } 
    }] 
}, { 
    "Employee": "Bill Der", 
    "Other Data": "test", 
    "Tasks": [{ 
    "AccessType": "Confidential", 
    "DueDate": "2016-02-26 23:59:59", 
    "taskId": "3", 
    "TaskTitle": "testTitle", 
    "Weeks": { 
     "2016-10-10": { 
     "Hours": "3" 
     } 
    } 
    }] 
}] 

Answer 1

Sie sind ein paar Informationen für mich fehlt vollständig, dies zu beantworten für Sie, aber ich kann Ihnen zeigen, wie ich etwas tun würde, so wie sonst.

Sie können alle Funktionen nutzen, die unveränderliche js Ihnen zur Verfügung stellt. So kann sagen, Sie haben ein Objekt mit den erforderlichen Informationen, um Ihr unveränderliches Objekt zu mutieren, so etwas wie diese:

var changeHours = { 
    "Employee": "John Doe", 
    "TaskTitle": "testTitle", 
    "Week": '2016-10-10', 
    "Hours": "5" 
} 

Und wir haben einen Grundzustand, wie Sie es haben wie diese ein:

var myState = Immutable.fromJS([{ 
    "Employee": "John Doe", 
    "Tasks": [{ 
    "AccessType": "Confidential", 
    "DueDate": "2016-02-26 23:59:59", 
    "taskId": "3", 
    "TaskTitle": "testTitle", 
    "Weeks": { 
     "2016-10-10": { 
     "Hours": "3" 
     } 
    } 
    }] 
}]); 

Hinweis: Ich habe die Arrays nicht mehr hinzugefügt, aber wir werden sie überlagern, damit sie berücksichtigt werden.

können Sie immutables Karte verwenden, um über laufen und die Elemente, die Sie suchen, so etwas wie diese finden:

var newstate = myState.map((k, v) => { 
    if (k.get('Employee') === changeHours.Employee) { 
    return k.get('Tasks').map((k, v) => { 
     if (k.get('TaskTitle') === changeHours.TaskTitle) { 
       return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours); 
     } 
     return k; 
    }) 
    return k; 
    } 
return k; 
}); 

Um es in Aktion zu sehen - http://fiddle.jshell.net/djj6u8xL/63/. Ich überspringe jede Array-Ebene mit map und finde den richtigen Knoten, indem ich basierend auf unserem changeHours-Objekt und immutables get überprüfe, und sobald ich auf der richtigen Ebene bin, benutze ich einfach setIn. Sie können auch updateIn verwenden, es hängt nur von Ihrem Szenario ab.

In Zukunft bitte geben Sie alle Informationen für Ihre Frage, nicht nur ein Bild der Daten, es wird viel einfacher, Ihnen zu helfen :) (und müssen nicht die Datenstruktur manuell eingeben).

bearbeiten: Update basierend auf Kommentar - http://fiddle.jshell.net/qxbq1nq3/9/

der Code:

function newTasks(k) { 
    return k.get('Tasks').map((k, v) => { 
    if (k.get('TaskTitle') === changeHours.TaskTitle) { 
     return k.setIn(['Weeks', changeHours.Week, 'Hours'], changeHours.Hours); 
    } 
    return k; 
    }); 
} 

var newstate = myState.map((k, v) => { 
    if (k.get('Employee') === changeHours.Employee) { 
    return k.set('Tasks', newTasks(k)); 
    } 
    return k; 
});