Structure projet Mobx comme Redux

Question

Je voudrais structurer le projet mobx pour ressembler à un projet redux. Stocker la configuration dans un fichier, les actions dans un autre fichier, peut-être une autre logique et les réactions dans le troisième fichier.

En outre, quelle est la meilleure pratique? Pour avoir un magasin comme redux ou plus. Comment ferais-je cela (enlever @action de l'intérieur d'une classe et l'envoyer d'un autre fichier). Quelqu'un peut-il donner de bons exemples de structuration de leurs projets?

Answer 1

Les décorateurs (@) sont une bonne façon d'utiliser MobX avec les classes, mais vous pouvez utiliser MobX sans les utiliser du tout.

Vous pouvez structurer votre application comme celui-ci, en utilisant la version de fonction de action:

Exemple (JSBin)

// state.js 
useStrict(true); 

const appState = observable({ 
    count: 0, 
    firstName: 'Igor', 
    lastName: 'Vuk', 
    fullName: computed(function() { 
    return `${this.firstName}-${this.lastName}`; 
    }) 
}); 

// actions.js 
const increment = action(function() { 
    ++appState.count; 
}); 

const changeLastName = action(function() { 
    appState.lastName = 'Stravinskij'; 
}); 

// app.js 
autorun(() => { 
    console.log(`${appState.fullName} has been logged in for ${appState.count} seconds`); 
}); 

setInterval(() => { 
    increment(); 
}, 1000); 

setTimeout(() => { 
    changeLastName(); 
}, 3000)