Mise à jour de l'état avec un tableau imbriqué d'objets

Question

Ceci est quelque chose que l'on appelle aussi une mise à jour de l'état profond. Où je dois mettre à jour le tableau d'état imbriqué.

Je suis en train d'implémenter une application redux simple. Ici, je veux mettre à jour l'état qui est un tableau imbriqué d'objet. Ma fonction réducteur prend l'état, l'action. Je dois mettre à jour la propriété de réponse d'état avec la nouvelle valeur. J'ai essayé de cartographier/itérer l'état mais ça ne marche pas pour moi. Existe-t-il un moyen de mettre à jour ces valeurs spécifiques et de renvoyer l'état de mise à jour.

const sampleData = [{ 
    "id": 1, 
    "text": "Hobby", 
    "answers": [{ 
    "id": 1, 
    "text": "Chess", 
    "responses": 5 
    }] 
}]; 

const action = { 
    type: "VOTE", 
    questionId: 1, 
    answerId: 3 
}; 

Ceci est la fonction handleSubmit que j'appelle lorsque le bouton Soumettre est cliqué sur le formulaire.

handleSubmit(e){ 
    const store = createStore(hobbyReducer, hobby); // created store here 
    var k = (document.querySelector('input[name = "hobby"]:checked').value); 

    store.dispatch({type:"SUBMIT", text: k, id: 1}); // Dispatching action to reducer 
    store.subscribe(()=>{ 

     console.log(store.getState()); 
    }); 
} 

Voici une partie de réducteur du programme:

function hobbyReducer(state, action) { 
    switch(action.type){ 
     case "SUBMIT": 
      return{ 
       ...state, 
       answers: state.answers.map(e=> (e.text === action.text && e.answers.id === action.id)? 
       { ...answers, 
       responses: (e.responses+1)} : 
      hobby) 
      } 
     break; 
     default: 
     return state; 
    } 
} 

état initial = sampleData; // objet Array donnée ci-dessus

Je ne parviens pas à mettre à jour la propriété des réponses qui se trouve dans un tableau imbriqué

Ceci est le code que je voulais écrire, après quelques recherches j'ai finalement fait ce qui était nécessaire. Bien que ce ne soit pas une solution en termes de complexité temporelle.

`

case "SUBMIT": 
     const updatedState = state.map(e =>{ 
      if(e.id === action.id) 
      return{...e, 
        answers: e.answers.map(f =>{ 
       if(f.text === action.text){ 
       return{ 
        ...f, 
        ...{responses: f.responses + 1}, 

       } 
       } 
       return f; 
      }) 
      } 
     return e; 
     }) 
     console.log("updatedstate", updatedState) 
     return updatedState 

Answer 1

Juste une erreur dans votre carte je pense:

function hobbyReducer(state, action) { 
    switch(action.type) { 
     case "SUBMIT": 
     return { 
      ...state, 
      answers: state.answers.map(answer => { 
      if (answer.text === action.text && answer.id === action.id) { 
       answer.response = answer.response + 1; 
      } 
      return answer; 
      }); 
     } 
     default: 
     return state; 
    } 
}