如何在没有装饰器的情况下重写这个 js class

Question

我想在不使用装饰器的情况下使用 mobx。通常我使用 mobx 包中的 decorate 但在这种特殊情况下，我找不到让它工作的方法。

原代码：

import { observable } from 'mobx'
import { create, persist } from 'mobx-persist'

class Order {
  @persist('object')
  @observable
  currentOrder = null
}

我尝试了什么：

import { observable, decorate } from 'mobx'
import { create, persist } from 'mobx-persist'
import { compose } from 'recompose'

class Order {
  currentOrder = null
}

decorate(Order, {
    currentOrder: compose(persist('object'), observable),
})

错误来自persist 告诉 serializr 装饰器没有正确使用。知道为什么这与上面不同并且不起作用吗？

Answer 1

TL;DR

属性装饰器需要非常具体的组合实现。

解决方案演示：

完整答案

属性装饰器基本上是形式的函数：
(target, prop, descriptor) => modifiedDescriptor

因此，为了组成两个属性装饰器，您需要将 第一个装饰器 的结果作为 第二个装饰器的第三个参数传递decorator（以及 target 和 prop）。

Recompose.compose (same as lodash.flowRight) 从右到左应用函数并将结果作为单个参数传递给下一个函数。

因此，您不能使用 Recompose.compose 来组合装饰器，但您可以轻松地为装饰器创建一个组合器：

/* compose.js */

export default (...decorators) => (target, key, descriptor) =>
  decorators.reduce(
    (accDescriptor, decorator) => decorator(target, key, accDescriptor),
    descriptor
  );

然后我们用它来组成observable和persist("object")。

/* Order.js */

import { observable, decorate, action } from "mobx";
import { persist } from "mobx-persist";
import compose from "./compose";

class Order {
  currentOrder = null;
}

export default decorate(Order, {
  currentOrder: compose(
    observable,
    persist("object")
  )
});

[21/8/18] MobX 更新 `>=4.3.2` & `>=5.0.4`:

我为 MobX5 & MobX4 打开了 PR（已合并），以便在 decorate 实用函数中支持多个装饰器 OOB。
因此，这在 MobX >=4.3.2 & >= 5.0.4 中可用：

import { decorate, observable } from 'mobx'
import { serializable, primitive } from 'serializr'
import persist from 'mobx-persist';

class Todo {
    id = Math.random();
    title = "";
    finished = false;
}
decorate(Todo, {
    title: [serializable(primitive), persist('object'), observable],
    finished: observable
})

Answer 2

一个更简单的解决方案是

class Stuff {
   title = ''
   object = {
      key: value
   }
}

decorate(Todo, {
    title: [persist, observable],
    object: [persist('object'),observable]
})

无需安装serializr包。以上功能内置于 mobx persist 中。

如何在没有装饰器的情况下重写这个 js class

How to rewrite this js class without decorators

javascript

decorator

mobx

mobx-persist

TL;DR

完整答案

[21/8/18] MobX 更新 `>=4.3.2` & `>=5.0.4`:

如何在没有装饰器的情况下重写这个 js class

How to rewrite this js class without decorators

javascript

decorator

mobx

mobx-persist

TL;DR

完整答案

[21/8/18] MobX 更新 >=4.3.2 & >=5.0.4:

[21/8/18] MobX 更新 `>=4.3.2` & `>=5.0.4`: