4

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

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

我想创建一个辅助函数，它采用选择器函数和组件，调用注入（以选择器函数作为参数）并观察该组件 - 有效地将这个组件连接到 mobx-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;
  }
}

（没有显示提供者和其他简单的东西，但它设置正确）。

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

4

1 回答 1

4

查看 Mobx 的文档，您的选择器似乎做错了一些事情。它应该返回一个带有stores 的对象，而不是一个带有stores 值的对象。尝试返回实际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>
  );
};
于 2016-08-24T20:36:55.473 回答