4

最近、react と mobx-react ライブラリで mobx を使い始めました。

機能的な React コンポーネントを使用してビューを作成したいと考えています。

セレクター関数とコンポーネントを受け取り、(パラメーターとしてセレクター関数を使用して) inject を呼び出し、そのコンポーネントを監視するヘルパー関数を作成したいと思います - このコンポーネントを 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 のドキュメントを見ると、セレクターが少し間違っているようです。store からの値を持つオブジェクトではなく、 store を持つオブジェクトを返す必要があります。代わりに実際の値を返してみてください: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 に答える