mobx-реагировать: компонент не отвечает на введенный магазин

Question

У меня есть компонент и добавлен экземпляр хранилища:

import React from "react";
import { inject, observer } from "mobx-react";

import Retention from "./Retention";

@inject(() => {
  return {
    retentionStore: new Retention()
  };
})
@observer
export default class RetentionChart extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillReceiveProps() {
    const { setFlag } = this.props.retentionStore;
    setFlag(Math.random());
  }
  render() {
    const { retentionStore } = this.props;
    const { loading, error, result } = retentionStore;

    console.log(loading, error, result);
    return null;
  }
}

А вот код магазина Retention:

import { observable, autorun, reaction, action, computed, flow } from "mobx";
import axios from "axios";

export default class Retention {
  @observable error = "";
  @observable loading = false;
  @observable result = null;

  @observable flag = false;

  @action
  setFlag = value => {
    this.flag = value;
  };

  query = flow(function*() {
    this.loading = true;
    this.error = "";
    try {
      this.result = yield axios
        .get("https://randomuser.me/api/")
        .then(response => {
          return response.data;
        });
    } catch (error) {}
    this.loading = false;
  });

  constructor() {
    reaction(
      () => this.flag,
      () => {
        this.query();
      }
    );
  }
}

То, что я хочу сделать, просто: когдавсе реквизиты компонента изменились, он запускает запрос

Однако, когда я помещаю компонент в родительский компонент, пытаюсь обновить реквизиты дочернего компонента, запрос может быть запущен, но дочерний компонент не отвечаетк заметному изменению в магазине:

import React from "react";
import { observer, inject } from "mobx-react";
import RetentionChart from "../RetentionChart";

export default class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    };
  }
  render() {
    const { flag } = this.state;
    return (
      <div
        onClick={() =>
          this.setState({
            flag: !this.state.flag
          })
        }
      >
        <p>Clickable</p>
        <RetentionChart flag={flag} />
      </div>
    );
  }
}

Что не так с моим кодом?Почему это не может ответить?Как я могу это исправить?

Вот демоверсия jsfiddle

Answer 1

@inject(() => {
  return {
    retentionStore: new Retention()
  };
})

каждый раз, когда вы получаете новый магазин.Попробуйте следующий код.

const retentionStore = new Retention();
@inject(() => ({retentionStore}))