编辑:我最终选择了 Mobx.js，有关详细信息，请参阅@mweststrate 答案。

所有关于 redux 的学习资源都展示了如何将它与普通对象模型一起使用。 但是当你使用一些 es6 类模型时，我无法弄清楚如何使用它。

例如，让我们采用这种状态形状:

{
 players:{
   000:{
     life:56,
     lvl:4,
     //...
  },
   023:{
     life:5,
     lvl:49,
     //...
  },
   033:{
     life:679,
     lvl:38,
     //...
  },
   067:{
     life:560,
     lvl:22,
     //...
  },
  //...
}

还有这个类(未测试)

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;
  }
}

假设我在 WorldCollection 中有 100 个玩家的集合。什么是最好的方法？

Take 1:将所有属性从实例复制到状态树

{
  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]
    },
  //...
}

这可以通过在构造函数中注入(inject) dispatch 来完成

//...
constructor({WorldCollection, dispatch})
//...

在每个 setter 中调度一个 Action 。

// setter
setHealth(hp){
  this.life += hp;
  dispatch({type:"HEAL_PLAYER", data:{id:this.id})
}

并将所有逻辑放在 reducer 中(setter 逻辑是确定性和原子性的)。

...
case "HEAL_PLAYER":
  return {
    ...state,
    life: state.life + action.hp
  };
...

专业人士:

• 恕我直言，在我看来，所有状态都只有一个地方，这是更 redux 的方式。

缺点:

• 所有逻辑都从模型分散到另一个地方。我不喜欢倍增文件。但这也许不是真正的问题？
• Redux 表示必须将逻辑放在操作中，而不是放在 reducer 中。
• 状态需要两倍的内存。我看到 immutables.js 可以对此进行优化，但我不确定。

Take 2:在 redux 状态树中只存储 id

{
  players:[
    001,
    002
    //...
  ]
}

这也可以通过在每个 setter 中使用 dispatch 并在每个 setter 之后调度一个 Action 来完成

// setter
setHealth(hp){
  this.life += hp;
  dispatch({type:"PLAYER_UPDATED", data:{id:this.id})
}

当新的树状态改变时。我调用 mapStateToProps 和 WorldCollection.getPlayer() 来检索正确的实例并将其属性映射到 View 。

优点:

• 通过不将逻辑放入 reducer 来尊重 Redux 方式
• 不是“重复状态”(如果 Immutables.js 无法对此进行优化)
• 逻辑在模型中(对我来说更有意义)

缺点:

• Redux 状态并不代表整个状态

我希望我没有过度简化案例。我的意思是澄清 redux 是否/如何与某些类模型一起使用。

练习 3:使用 Mobx.js 代替/使用 Redux

--- 非常前实验性的---

我一周前发现了 Mobx.js，它的简单性/性能吸引了我。

我认为我们可以观察每个类成员(它们一起构成应用程序状态)

  @observable life; //int
  @observable lvl; //int
  @observable buffs; //[objects]
  @observable debuffs; //[objects]
  @observable inventory; //[objects]

其他地方有一个构建状态树的类，也许 Redux 在这里有意义？ (注意我不知道如何做这部分。必须在 Mobx 中更深入地挖掘)

这是纯粹的 redux/mobx 比较中的优点/缺点，对于我的情况。

优点:

• 不那么冗长
• 没有可继承的模型(就像在 redux-orm 中一样)
• 性能已经过评估(所以我几乎不知道我会去哪里)
• 不要在类模型中编写“固执己见”的 reducer(只是修改器)

缺点:

• 不知道如何实现重做/撤消(或游戏开发中的 jitter buffer )
• 似乎不像 redux 中的“树”那样眨眼间就拥有了整个状态(对我来说这是 redux 的 killer 级特性)

最佳答案

我想补充一点，如果您要使用 Redux，您根本不会在类中存储状态。在 Redux 中，这种逻辑将在缩减器中描述，缩减器将对普通对象而不是类实例进行操作。您将保持数据规范化，以便每个实体都通过其 ID 保存在对象映射中，并且对子实体的任何引用都将是 ID 数组而不是真正的引用。然后，您将编写选择器来重建您关心渲染的数据部分。

您可能会找到 this discussion有帮助，以及这两个例子:

• shopping-cart
• tree-view

关于javascript - 如何在 Redux 中使用类模型(使用 Mobx 选项)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35733518/