結構Mobx項目像Redux

Question

我想構建mobx項目看起來像redux項目。在一個文件中存儲配置，在另一個文件中執行操作，或者在第三個文件中執行其他邏輯和反應。

另外，最佳實踐是什麼？擁有一個或更多的商店。我會怎麼做（從一個類中取出@action並從另一個文件中調用它）。任何人都可以舉一些很好的結構化他們的項目的例子嗎？

Answer 1

修飾器（@）是使用MobX和類的好方法，但是您可以在不使用它們的情況下使用MobX。

你可以構建應用程序像這樣，通過使用action功能版本：

例（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)