Mobx

Question

最近我开始将 mobx 与 react 和 mobx-react 库一起使用。

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

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

但我无法让它工作。正在调度操作，但视图不会对此更改做出反应（存储属性确实发生更改，但组件不会对此更改做出反应）。

这是我的辅助函数：

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，您的选择器似乎做错了。它应该return一个具有商店的对象，并且不是具有来自商店的值的对象。尝试 returning 实际的 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>
  );
};

Mobx - React：一起注入和观察

Mobx - React: Inject and Observe together

javascript

reactjs