标签: mobx-react

我正在使用 Mobx 来创建可观察状态。

这是我的代码片段：

window.sessionStorage.setItem(createKey(key), JSON.stringify(state))

在上面的代码中，“状态”对象是可观察的。当我尝试将其转换为字符串时，出现错误：

错误：无法读取未定义的属性“atom”

我和我的团队正在为下一个项目分析NativeBase框架http://nativebase.io/，我们唯一关心的是他们将Redux用于其示例应用程序，并且我们通常选择Mobx进行状态管理。所以我的问题是，可以将Mobx与NativeBase应用一起使用吗？

我的组件有一个方法..

onUpdateProperty = (key, value) => {
  this.state.formData[key] = value;
}

我想测试是否在更改输入后调用此方法...

it('on update input should update formData', function () {
  const wrapper = mount(<MyComp.wrappedComponent {...this.minProps} />);
  const spy = spyOn(wrapper.instance(), 'onUpdateProperty');

  expect(spy).not.toHaveBeenCalled();

  const nameInput = wrapper.find('[name="name"]');
  nameInput.simulate('change', {
    target: { name: 'name', value: 'v1' },
  });

  wrapper.update();

  // expect(spy).toHaveBeenCalledWith('name', 'v1');
  expect(spy).toHaveBeenCalled();
});  

wrappedComponent是因为我使用Mobx-react

我正在使用 mobx 在 reactjs 中以下列方式声明一个可观察数组

@observable cacheditems

constructor() {
    this.cacheditems  =   []

现在我在离线时从 pouch-db 中检索数据，如下所示：

var items = []
db.allDocs({include_docs: true}, function(err, docs) {
                docs.rows.map((obj, id) => {
                    items.push(obj.doc)
                })
            })


 this.cacheditems = items

但是没有设置数据。当我尝试获取用于呈现空数组的数据时。

刚刚使用reac-native-init创建了一个新项目。使用

"react": "16.0.0",
"react-native": "0.51.0",

从xcode运行项目我遇到以下错误

未处理的JS异常：模块AppRegistry不是注册的可调用模块（调用runApplication）

未定义不是对象（评估'_react.PropTypes.object'）

在我的项目目录中搜索_react.PropTypes.object。它仅在mobx-react文件夹中使用。现在我的项目无法运行，它停留在启动屏幕上。任何帮助是极大的赞赏

编辑

现在我收到此错误

_react3.default.PropTypes.shape

但是我在整个项目中找不到这条线

通过下面的代码我得到这个错误：

error: Error: [mobx-state-tree] Cannot modify 
'AuthenticationStore@<root>', the object is protected and can only be 
modified by using an action.

有问题的代码（生成器）：

.model('AuthenticationStore', {
    user: types.frozen(),
    loading: types.optional(types.boolean, false),
    error: types.frozen()
  })
  .actions(self => ({
    submitLogin: flow(function * (email, password) {
      self.error = undefined
      self.loading = true
      self.user = yield fetch('/api/sign_in', {
        method: 'post',
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          'user' : {
            'email': email,
            'password': password
          }
        })
      }).then(res => {
        return res.json()
      }).then(response => {
        self.loading …

我有一篇文章是 mobx-state-tree 对象，我在 React 应用程序中使用它。

这是我的树内的一个动作

setId(id: string) {
  self.id = id

  this.updateProduct()
},

还有活动

 <input
  value={comp.productId}
  onChange={(e) => comp.setId(e.target.value)}
/>

问题是this.updateProduct()每次更改都会运行，并在每次按键后进行异步调用。

我想利用 mobx 反应并使用类似的东西

reaction(
() => ({
  id: this.id
}),
() => {
  this.updateProduct()
}, {
  delay: 500 // this is the key thing
})

我发现延迟在这种情况下非常有用，所以我想在树内使用它们。

在 mobx 状态树中添加反应是一个好习惯吗？如果是，使用反应的正确位置在哪里？

我可以在反应组件内定义反应，但它将在树之外。在树外面是个好习惯吗？

有人可以向我解释什么是真正的区别以及为什么这里的两个示例都相同：

1) 通过 store 文件中的 action/runInAction 更改 observable 的状态：

颜色存储文件：

@observable
color='red'

@action
setColor(){
  this.color='blue'
}

2）通过组件本身改变状态（这被认为是不好的做法）：

反应组件文件：

onClick = () => this.props.colorStore.color='blue' //still working...

这是我的简化商店：

export class ProfileStore {
  profile = {
    id: 1,
    name: "Tommy",
    todos: [
      {
        value: "Clean the room",
        done: false
      }
    ]
  };

  constructor() {
    makeObservable(this, {
      profile: observable,
    });
  }
}

我的目标是倾听可观察到的“配置文件”内的每一个可能的变化。我想使用reactionMobX 来实现此目的，但这有点棘手。

reaction(
      () => this.profile,
      () => {
        console.log("change");
      }
    );

上面的示例根本不起作用，因为 MobX 不会对值做出反应，而是对属性和引用做出反应。所以我把它改成这样：

reaction(
      () => ({
        id: this.profile.id,
        name: this.profile.name,
        todos: this.profile.todos.slice()
      }),
      () => {
        console.log("change");
      }
    );

它开始起作用，但并不完全起作用。除了切换待办事项中的属性之外，它还会监听所有更改done。如果我添加另一个属性，我需要在这里列出，这有点乏味。

处理这个问题的最佳方法是什么？如何应对每一个可能的变化？

我为此制作了一个codesandbox：链接

尝试按下按钮并查看计数器。

为什么MobX不能用作国家容器？官方文档中提到"MobX不是国家容器"？是不是像Redux？