Comment accéder tableau d'objets sous-élément de réducteurs de Redux

Question

J'ai une réponse d'une API comme celui-ci:

[{ 
    "id": 1, 
    "name": "Microsoft", 
    "status": true, 
    "consoles": [{ 
     "id": 4, 
     "name": "Xbox", 
     "status": true, 
     "subconsoles": [{ 
      "id": 7, 
      "name": "Xbox 360", 
      "status": true, 
      "subconsoles": [] 
     }, 
    { 
      "id": 90, 
      "name": "Xbox One", 
      "status": false, 
      "subconsoles": [{ 
      "id": 21, 
      "name": "Xbox One S", 
      "status": true, 
      "subconsoles": [] 
     }, 
     { 
      "id": 12, 
      "name": "Xbox One X", 
      "status": false, 
      "subconsoles": [{ 
       "id": 41, 
       "name": "Xbox One X model 1", 
       "status": false, 
       "subconsoles": [] 
      }] 
     }] 
     }] 
    }] 
}] 

Voici également les données en format agréable:

Qu'est-ce que J'essaie de réaliser est de modifier le statut des sous-sols. donc de la section de mise en page Je passe l'identifiant de ce que je veux changer, mais je suis vraiment coincé sur la façon d'accéder au sous-élément (et éventuellement le sous-sous-élément) dans les réducteurs de Redux:

case SUBCONSOLES_ENABLE: 
return { 
    ...state, 
    id: action.payload.subconsoleId, 
    ..... 
} 

Answer 1

Vous feriez besoin de créer une copie de chacun des tableaux que vous avez dans votre état avant de pouvoir les changer, pour garder votre état immuable. Avec autant de niveaux, ça se compliquerait vite!

case SUBCONSOLES_ENABLE: 
let newState = [...state]; //create copy of state array 
..... //find the index of the object in the newState array which you would want to change 
let newConsoles = [...newState[index].consoles]; //create a copy of consoles 
.....   //find the index of the object in the newConsoles array which you would want to change 
let newSubConsoles = [...newConsoles[index2].subconsoles];//create a copy of subconsoles 
let subConsole = newSubConsoles.find((a)=>a.id===action.payload.subconsoleId); //find the object in the newConsoles array which you would want to change 
    let newSubConsole = {...subConsole}    //make a copy of your object 
    .....           //make your changes to the copy 
               //replace the old object with the new object in newSubConsoles 
               //replace subConsoles array with newSubConsoles array in newConsoles 
               // replace consoles array with newConsoles array in new State. 
//and finally!!           
return newState; 

Sur la base de la forme de votre état, je suggérerais regardant normalizing your state et en utilisant Immutable.js

Answer 2

Vérifiez la mise à jour de la fn 'immutability-helper' library, son recommandé dans les documents eux-mêmes réagiront.