javascript - Mobx- react : Inject and Observe together

Question

最近我开始使用 mobx with react 和 mobx-react 库。

我想使用功能性 React 组件来创建我的 View 。

我想创建一个辅助函数，它采用选择器函数和组件，调用注入(inject)(使用选择器函数作为参数)并观察该组件 - 有效地将此组件连接到 mobx-react 存储(取自 Provider 上下文)并仅为该组件提供所需的属性。

但我无法让它工作。正在调度操作，但 View 不会对此更改使用react(商店属性确实发生了更改，但组件不会对此更改使用react)。

这是我的辅助函数:

import { observer, inject } from 'mobx-react';

export function connect(selectorFunction, component) {
  return inject(selectorFunction)(observer(component));
}

这是我的组件:

import React from 'react';
import { connect } from 'utils';

const selector = (stores) => {
  return {
    counter: stores.counterStore.counter,
    double: stores.counterStore.double,
    increment: stores.counterStore.increment
  };
};

const Counter = ({ counter, double, increment }) => {
  return (
    <div className="counter">
      <p>{ counter }</p>
      <p className="double">{ double }</p>
      <button onClick={increment}>+1</button>
    </div>
  );
};

export default connect(selector, Counter);

这是我的商店:

import { observable, computed, action } from 'mobx';

export default class Counter {
  @observable counter = 0;

  @action
  increment = () => {
    this.counter++;
  }

  @computed
  get double() {
    return this.counter * 2;
  }
}

(没有显示 Provider 和其他简单的东西，但设置正确)。

谢谢!非常感谢每个答案。

Answer 1

查看 Mobx 的 documentation , 看起来你的选择器做错了。它应该返回一个带有商店的对象，而不是带有来自商店的值的对象。尝试返回实际的 counterStore:

const selector = (stores) => {
  return {
    counterStore: stores.counterStore
  };
};

然后在你的组件中像这样使用它:

const Counter = ({ counterStore: { counter, double, increment } }) => {
  return (
    <div className="counter">
      <p>{ counter }</p>
      <p className="double">{ double }</p>
      <button onClick={increment}>+1</button>
    </div>
  );
};