Question

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

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

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

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

这是我的助手功能：

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

（未显示提供商和其他简单的内容，但设置正确）。

谢谢！每个答案都非常感谢。

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

Mobx - React：一起注射和观察

1 个答案: