[英]How to use class model with Redux (with a Mobx option)
EDIT: I finally choosed Mobx.js, refer to @mweststrate answer for details. 编辑:我终于选择了Mobx.js,有关详细信息,请参阅@mweststrate答案。
All learning ressources about redux show how to use it with plain object models. 所有有关redux的学习资源都显示了如何将其与普通对象模型一起使用。 But I can't figure out how to use it when you use some es6 Class models.
但是当您使用某些es6类模型时,我不知道如何使用它。
For example, let's take this state shape: 例如,让我们采用以下状态形状:
{
players:{
000:{
life:56,
lvl:4,
//...
},
023:{
life:5,
lvl:49,
//...
},
033:{
life:679,
lvl:38,
//...
},
067:{
life:560,
lvl:22,
//...
},
//...
}
And this class (not tested) 和该类(未经测试)
class Player{
id; //int
life; //int
lvl; //int
buffs; //[objects]
debuffs; //[objects]
inventory; //[objects]
_worldCollection; //this class know about the world they belongs to.
constructor({WorldCollection}){
this._worldCollection = WorldCollection;
}
healPlayer(targetId, hp){
this._worldCollection.getPlayer(targetId).setHealth(hp);
}
// setter
setHealth(hp){
this.life += hp;
}
}
Imagine I have a collection of 100 players in WorldCollection. 想象一下,我在WorldCollection中有100位玩家。 What is the best way?
什么是最好的方法?
{
players:{
001:{
life: 45,
lvl: 4,
buffs: [objects]
debuffs:[objects]
inventory:[objects]
},
034:{
life: 324,
lvl: 22,
buffs: [objects]
debuffs:[objects]
inventory:[objects]
},
065:{
life: 455,
lvl: 45,
buffs: [objects]
debuffs:[objects]
inventory:[objects]
},
//...
}
This could be done by injecting dispatch
in the constructor 这可以通过在构造函数中注入
dispatch
来完成
//...
constructor({WorldCollection, dispatch})
//...
Dispatch an action in each setter. 在每个设置器中调度一个动作。
// setter
setHealth(hp){
this.life += hp;
dispatch({type:"HEAL_PLAYER", data:{id:this.id})
}
And put all the logic in reducers (setter logic being deterministic and atomic). 并将所有逻辑放入简化器(确定器逻辑是确定性的和原子性的)。
...
case "HEAL_PLAYER":
return {
...state,
life: state.life + action.hp
};
...
Pro: 优点:
Cons: 缺点:
{
players:[
001,
002
//...
]
}
This could be done by also using dispatch
in each setter
and dispatch an action after each setter 这也可以通过在每个
setter
使用dispatch
在每个setter
之后调度动作来完成
// setter
setHealth(hp){
this.life += hp;
dispatch({type:"PLAYER_UPDATED", data:{id:this.id})
}
When the new tree state is changed. 当新的树状状态改变时。 I call
mapStateToProps
and WorldCollection.getPlayer()
to retrieve the right instance and map its properties to the view. 我调用
mapStateToProps
和WorldCollection.getPlayer()
来检索正确的实例并将其属性映射到视图。
Pros: 优点:
Cons: 缺点:
I hope I have not simplified the case too much. 我希望我没有过多简化此案。 My point is to clarify if/how redux could be use with some class models.
我的观点是阐明是否/如何在某些类模型中使用redux。
--- very pre-experimental here --- ---这里是非常实验性的---
I discovered Mobx.js a week ago and its simplicity/perf had me. 一周前,我发现了Mobx.js,它的简单/完美吸引了我。
I think we could observe each class members (which together form the app state) 我认为我们可以观察每个班级成员(它们共同构成应用程序状态)
@observable life; //int
@observable lvl; //int
@observable buffs; //[objects]
@observable debuffs; //[objects]
@observable inventory; //[objects]
and somewhere else have a class which builds the state tree, maybe Redux could make sense here? 在其他地方有一个建立状态树的类,也许Redux在这里有意义? (Note I have no clue how to do this part. Have to dig more deeply in Mobx)
(请注意,我不知道如何执行此部分。必须更深入地研究Mobx)
This is pros/cons in a pure redux/mobx comparaison for my case . 就我的情况而言,这在纯redux / mobx比较中是利弊。
Pros: 优点:
Cons: 缺点:
I would like to add that if you were to go with Redux you would not store state in classes at all . 我想补充一点,如果要使用Redux ,则根本不会将状态存储在类中 。 In Redux, this logic would be described in reducers which would operate on plain objects rather than class instances.
在Redux中,将在化简器中描述此逻辑,该化简器将对普通对象而不是类实例进行操作。 You would keep the data normalized so each entity is kept in an object map by its ID, and any reference to child entities would be an array of IDs rather than a real reference.
您将数据标准化,以便每个实体都通过其ID保留在对象图中,并且对子实体的任何引用将是ID数组,而不是真实的引用。 You would then write selectors to reconstruct the parts of the data you care about for rendering.
然后,您将编写选择器以重构您关心的渲染数据部分。
You might find this discussion helpful, as well as these two examples: 您可能会发现此讨论以及下面的两个示例很有帮助:
(MobX author). (MobX作者)。 For a short answer on the questions about MobX:
对于有关MobX的问题的简短答案:
Redo / undo can be implemented in two ways: 重做/撤消可以通过两种方式实现:
Single state tree: 单状态树:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.