Redux mise à jour des données immuables imbriquées

Question

J'ai un problème avec la mise à jour des données redux immuables et très imbriquées. Voici un exemple de ma structure de données et ce que je veux changer. Si quelqu'un pouvait me montrer le schéma d'accès à cette mise à jour en utilisant ES6 et l'opérateur de propagation je serais reconnaissant. Tout mon état est un objet avec des projets (paires clé/valeur - ici un exemple d'un seul projet) qui sont des objets avec sa propre clé (et les clés sont aussi des id), des tableaux de procédures et des tâches :

{ 1503658959473: 
    { projectName: "Golden Gate", 
    projectLocation": "San Francisco", 
    start:"22/09/1937", 
    id:1503658959473, 
    procedures:[ 
     { title: "Procedure No. 1", 
     tasks:[ 
      {name: "task1", isDone: false}, 
      {name: "task2", isDone: false}, 
      {name: "task3", isDone: false} 
     ] 
     } 
    ] 
    } 
} 

Ce que je suis prêt à faire est de mettre à jour une propriété 'isDone' d'une seule tâche à 'true'. C'est une sorte de basculer les tâches. Comment puis-je retourner cet état avec cette information mise à jour?

Le créateur d'action de transmettre cette information au réducteur:

export function toggleTask(activeProject, task, taskIndex) { 
return { 
    type: TOGGLE_TASK, 
    payload: { 
     activeProject, 
     task, 
     taskIndex 
    } 
}; 

}

Answer 1

Je me créerais une nouvelle classe appelée ProjectModel, qui a une méthode publique toggleTask qui est capable de mettre à jour le statut de sa tâche . L'état du réducteur serait un objet dont les clés sont des ID de projet et les valeurs sont ProjectModel instances.

Answer 2

Vous avez rencontré un problème commun avec Redux. Les docs vous recommandent d'aplatir votre structure de données pour la rendre plus facile à utiliser, mais si ce n'est pas ce que vous voulez faire, je me référerais à part of their docs. Comme Object.assign() et l'opérateur ...spread créent des copies superficielles, vous devez parcourir chaque niveau de nid dans votre objet et le recopier.

Votre code pourrait ressembler à quelque chose comme ça ...

function updateVeryNestedField(state, action) { 
    return { 
     ...state, 
     procedures : { 
      ...state.procedures, 
      tasks : { 
       return tasks.map((task, index) => { 
       if (index !== action.taskIndex) { 
        return task 
       } 
       return { 
        ...task, 
        task.isDone: !task.isDone 
       } 
       } 
      } 
     } 
    } 
}