Réaction Mobx sur le sous-réseau change/enlève

Question

Comment réagir à un changement dans la matrice de la matrice?

var todos = mobx.observable([ 
 
    { 
 
     title: "Make Pasta", 
 
     subtasks: [ 
 
      { title: 'Pasta' }, { title: 'Salt' }, 
 
     ] 
 
    }, 
 
    { 
 
     title: "Make coffee", 
 
     subtasks: [ 
 
      { title: 'Hot Water' }, { title: 'Milk' }, 
 
     ] 
 
    } 
 
]); 
 

 
const reactionSubtask = mobx.reaction(
 
    () => todos.map(todo => todo.subtasks), 
 
    subtasks => console.log("reaction subtasks >", subtasks) 
 
); 
 

 
const reactionTask = mobx.reaction(
 
    () => todos.map(todo => todo.title), 
 
    titles => console.log("reaction title >", titles.join(', ')) 
 
); 
 

 
const resultSubtaskRemove = todos[1].subtasks.remove(todos[1].subtasks[0]); 
 
console.log('Subtask remove result >', resultSubtaskRemove); 
 

 
const resultSubTaskAdd = todos[1].subtasks.push({title: 'Filter'}); 
 
console.log('Subtask add result >', resultSubTaskAdd); 
 

 
const resultSubTaskChange = todos[1].subtasks[0].title = 'Change titled'; 
 
console.log('Subtask change result >', resultSubTaskChange);

<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>

La réaction est pas exécutée.

Dans mon cas, j'utilise mobx-react et mes composants React ne sont pas mis à jour lorsque je change de tableau enfants.

Answer 1

La première réaction ne fonctionne pas comme prévu car vous accédez à la propriété observable qui est une référence à un tableau observable. Votre code modifie le tableau, mais pas la référence elle-même.

Cette ligne

todos[0].subtasks = 'changed' 

invoqueront première réaction.

Si vous souhaitez réagir à des sous-tâches addition/suppression dont vous avez besoin de changer votre réaction à quelque chose comme ça

const reactionSubtask = mobx.reaction(
    () => todos.map(todo => todo.subtasks.slice()), 
    subtasks => console.log("reaction subtasks >", subtasks) 
); 

Deuxième réaction ne fonctionne pas parce que vous changez titre d'une sous-tâche, mais les accès réaction de titre les tâches.

Je vous recommande fortement de lire les documents MobX car ils vont dans les moindres détails pour décrire ce à quoi MobX réagit. De plus, il y a an example ce qui explique pourquoi la première réaction ne fonctionne pas.