How to use the mobx-react.inject function in mobx-react

import { inject, observer } from 'mobx-react';
import light from '@parity/light.js-react';
import { withProps } from 'recompose';

import check from '../../assets/img/icons/check.svg';
import loading from '../../assets/img/icons/loading.svg';
import withTokens from '../../utils/withTokens';
import { blockscoutTxUrl } from '../../utils/blockscout';

// Number of confirmations to consider a transaction successful
const MIN_CONFIRMATIONS = 6;

@light({
  chainName: () => chainName$().pipe(withoutLoading())
})
@inject('sendStore')
@withTokens
@withProps(({ match: { params: { tokenAddress } }, tokens }) => ({
  token: tokens[tokenAddress]
}))
@observer
class Sent extends Component {
  componentWillMount () {
    // If we refresh on this page, return to homepage
    if (!this.props.sendStore.txStatus) {
      this.handleGoToHomepage();
    }
  }

  handleGoToHomepage = () => {
    const { history, sendStore } = this.props;
    sendStore.clear();

import {
  Icon, Table, Popover, Image
} from 'components/Base';
import Layout, {
  Dialog, Grid, Section, Card
} from 'components/Layout';
import Status from 'components/Status';
import Toolbar from 'components/Toolbar';
import TdName, { ProviderName } from 'components/TdName';
import { formatTime, getObjName } from 'utils';

import styles from './index.scss';

@translate()
@inject(({ rootStore, sock }) => ({
  rootStore,
  clusterStore: rootStore.clusterStore,
  appStore: rootStore.appStore,
  runtimeStore: rootStore.runtimeStore,
  sock
}))
@observer
export default class Purchased extends Component {
  async componentDidMount() {
    const { clusterStore, appStore, runtimeStore } = this.props;
    // clusterStore.registerStore('app', appStore);

    await clusterStore.fetchAll({ noLimit: true });
    const appIds = clusterStore.clusters.map(cluster => cluster.app_id);
    if (appIds.length) {
      await appStore.fetchAll({ app_id: appIds });

import { Button, Checkbox, Col, ControlLabel, DropdownButton, Form, FormControl, FormGroup, Grid, MenuItem, ProgressBar, Radio, Row, SplitButton } from 'react-bootstrap'
import { action, observable } from 'mobx'
import { inject, observer } from 'mobx-react'
import React from 'react'

@inject('mainUI')
@observer
export default class BasicWidgetTestView extends React.Component {
  componentDidMount () {
    window.view = this
  }

  @observable fields = {
    text: '',
    email: '',
    password: '',
    checkbox1: '',
    checkbox2: '',
    checkbox3: '',
    radioGroup: '1',
    select: 'option1', // Default value
    multiSelect: [],

onClick={() => 
                            this.nameInputTrans.focus()}/>}
                            
                    <div>
                        <button title="{item.gate"> (this.props.channelStore.toggleGate(item.name))}&gt;{item.gate ? '●': '○'}</button>
                        <button title="{'Reset"> (this.props.channelStore.resetTime(item.name))}&gt;🡅</button>
                    </div>
            
          
        );
    }
}

@inject('channelStore')
@observer
class Channel extends React.Component {
  
  render() {
    const { item, index } = this.props;
    console.log('RENDER CHANNEL', item);
      
    let channelClass = "ChannelItem";
    if ((!item.loop &amp;&amp; item.executed) || ( item.mute) || (this.props.channelStore.soloEnabled &amp;&amp; !item.solo)) {
      channelClass += " disabled";
    }
    if(_.includes(item.name, "n")){
        channelClass = "NordChannelItem";
    }
    return (<div>
        
</div>

import React from 'react'
import { ipcRenderer } from 'electron';
import { hashHistory } from 'react-router';
import { observer, inject } from 'mobx-react';
import close from '../../static/traffic-light-close.svg';
import minimize from '../../static/traffic-light-minimize.svg';
import logo from '../../static/favicon.svg';


@inject('app')
@observer
class Header extends React.Component {


    logout = () => {
        this.props.app.logout();
        hashHistory.push('/');
    }

    render() {
        const { userpass } = this.props.app;

        return (
          <header>
            <ul>
              <li></li></ul></header>

MetaMaskIsLockedAlert,
  successfulInvestmentAlert
} from '../../utils/alerts'
import { Loader } from '../Common/Loader'
import { CrowdsaleConfig } from '../Common/config'
import { INVESTMENT_OPTIONS, TOAST } from '../../utils/constants'
import { inject, observer } from 'mobx-react'
import QRPaymentProcess from './QRPaymentProcess'
import CountdownTimer from './CountdownTimer'
import classNames from 'classnames'
import moment from 'moment'
import { BigNumber } from 'bignumber.js'
import { Form } from 'react-final-form'
import { InvestForm } from './InvestForm'

@inject('contractStore', 'crowdsalePageStore', 'web3Store', 'tierStore', 'tokenStore', 'generalStore', 'investStore', 'gasPriceStore', 'generalStore')
@observer
export class Invest extends React.Component {
  constructor(props) {
    super(props)
    window.scrollTo(0, 0)

    this.state = {
      loading: true,
      pristineTokenInput: true,
      web3Available: false,
      investThrough: INVESTMENT_OPTIONS.QR,
      crowdsaleAddress: CrowdsaleConfig.crowdsaleContractURL || getQueryVariable('addr'),
      toNextTick: {
        days: 0,
        hours: 0,
        minutes: 0,

import { autobind } from "core-decorators";
import { inject, observer } from "mobx-react";
import * as React from "react";
import { Link } from "react-router-dom";
import { Container, Icon } from "semantic-ui-react";
import { PublicClientState } from "../../../state/PublicClientState";
import { RootState } from "../../../state/RootState";

interface IPublicPodcastFooterProps { publicClientState?: PublicClientState; }

@inject("publicClientState")
@observer
export default class Footer extends React.Component {
    public render() {

        return (
            
                Copyright © 2019 Podsheets

import React, { createContext, useMemo, useContext } from 'react';
import { inject } from 'mobx-react';
import { injectIntl } from 'react-intl';
import { DataSet } from 'choerodon-ui/pro';
import TableDataSet from './TableDataSet';
import GitopsLogDataSet from './GitopsLogDataSet';
import RetryDataSet from './RetryDataSet';
import { useResourceStore } from '../../../../../stores';

const Store = createContext();

export function useSyncStore() {
  return useContext(Store);
}

export const StoreProvider = injectIntl(inject('AppState')(
  (props) => {
    const { AppState: { currentMenuType: { id } }, children, intl } = props;
    const {
      intlPrefix,
      resourceStore: {
        getSelectedMenu: { menuId },
      },
    } = useResourceStore();

    const tableDs = useMemo(() => new DataSet(TableDataSet({
      intl,
      intlPrefix,
      projectId: id,
      envId: menuId,
    })), [id, intl, intlPrefix, menuId]);
    const logDs = useMemo(() => new DataSet(GitopsLogDataSet(id, menuId)), [id, menuId]);

},
          ]}
          loading={repoVoteStore.loading.results}
          itemsCount={repoVoteStore.resultsCount}
          items={repoVoteStore.results}
          pageSize={uiStore.state.repoVoteResultsTable.pageSize}
          curPage={uiStore.state.repoVoteResultsTable.curPage}
          tableDataSetter={uiStore.setRepoVoteResultsTableData.bind(uiStore)}
          topContent={<div>Total commit IDs: {repoVoteStore.resultsCount}</div>}
        /&gt;
      
    );
  }
}

export default inject('rootStore')(
  observer(WithSetIdOnUiStore(observer(ResultsTab), 'setRepoVoteResultsTableData', 'interval'))
);

import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { DataSet } from 'choerodon-ui/pro';
import { inject } from 'mobx-react';
import { injectIntl } from 'react-intl';
import { observer } from 'mobx-react-lite';
import TableDataSet from './TableDataSet';
import { useResourceStore } from '../../../../stores';

const Store = createContext();

export function useCertificateStore() {
  return useContext(Store);
}

export const StoreProvider = injectIntl(inject('AppState')(
  observer((props) => {
    const { AppState: { currentMenuType: { id } }, children } = props;
    const {
      intlPrefix,
      intl: { formatMessage },
      resourceStore: { getSelectedMenu: { parentId }, setUpTarget, getUpTarget },
      itemTypes: { CERT_GROUP },
    } = useResourceStore();
    const certificateDs = useMemo(() => new DataSet(TableDataSet({
      formatMessage,
      intlPrefix,
      projectId: id,
      envId: parentId,
    })), [id, parentId]);

    const value = {