How to use mobx-react - 10 common examples

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: [],

{/*  */}
      
      
        {item.id} - {Math.random()}
      
      
        {item.title}
      
      
        {item.role}
      
    
  
));

const SelectLinkItem3 = observer(({ item = {} }) => (
  
    
      
        
      
      
        {item.id} - {Math.random()}
      
      
        {item.title}
      
      
        {item.role}

// 网页判断不了还有没有下一页, 假如长度小于一页24个, 不请求
        if ($.tag.list.length < 24) {
          return false
        }
        return $.fetchTag()
      }}
    />
  )
}

List.contextTypes = {
  $: PropTypes.object,
  navigation: PropTypes.object
}

export default observer(List)

getRowAction={undefined}
                        // getRowAction={(row_obj) => getContractPath(row_obj.id)} TODO uncomment once smart-chart component is fixed.
                    >
                        
                    
                }
            

        );
    }
}

OpenPositions.propTypes = {
    active_positions: MobxPropTypes.arrayOrObservableArray,
    component_icon  : PropTypes.func,
    currency        : PropTypes.string,
    error           : PropTypes.string,
    history         : PropTypes.object,
    is_empty        : PropTypes.bool,
    is_loading      : PropTypes.bool,
    is_mobile       : PropTypes.bool,
    is_tablet       : PropTypes.bool,
    onMount         : PropTypes.func,
    onUnmount       : PropTypes.func,
    totals          : PropTypes.object,
};

export default connect(
    ({ modules, client }) => ({
        currency        : client.currency,

*         WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *         See the License for the specific language governing permissions and
 *         limitations under the License.
 */

import React from 'react';
import {observer, PropTypes as MobxPropTypes} from 'mobx-react';
import PropTypes from 'prop-types';

import Autocomplete from '../../utils/autocomplete';

@observer
export default class TimeWindowPicker extends React.Component {
    static propTypes = {
        uiState: PropTypes.object.isRequired,
        options: MobxPropTypes.observableArray // eslint-disable-line react/require-default-props
    };

    render() {
        return (
            <div>
                
            </div>
        );
    }
}

import { action, observable } from 'mobx'
import { useStaticRendering } from 'mobx-react'

const isServer = typeof window === 'undefined'
// eslint-disable-next-line react-hooks/rules-of-hooks
useStaticRendering(isServer)

export class Store {
  @observable lastUpdate = 0
  @observable light = false

  hydrate(serializedStore) {
    this.lastUpdate =
      serializedStore.lastUpdate != null
        ? serializedStore.lastUpdate
        : Date.now()
    this.light = !!serializedStore.light
  }

  @action start = () => {
    this.timer = setInterval(() => {
      this.lastUpdate = Date.now()

const LRUCache = require('lru-cache')
const helmet = require('helmet')
const mobxReact = require('mobx-react')
const R = require('ramda')
// inspect graphql model
const { express: voyagerMiddleware } = require('graphql-voyager/middleware')

const CONFIG = require('./config/config.json')

const app = next({ dev, quiet: false })
const handle = app.getRequestHandler()
const SERVE_PORT = process.env.SERVE_PORT || 3000
const HOME_PAGE = '/home/posts'

// SSR for mobx
mobxReact.useStaticRendering(true)

// This is where we cache our rendered HTML pages
const ssrCache = new LRUCache({
  max: 1000, // cache item count
  // maxAge: 1000 * 60 * 60, // 1hour
  maxAge: 1000 * 30, // 30 ses
})

app.prepare().then(() => {
  const server = express()
  /* eslint-disable-next-line */
  const { Sentry } = require('./src/services/sentry')({ release: app.buildId })

  server.use(Sentry.Handlers.requestHandler())
  server.use(cookieParser())
  server.use(responseTime())

import './env';

import * as express from 'express';
import * as helmet from 'helmet';
import * as mobxReact from 'mobx-react';
import * as next from 'next';
import * as path from 'path';

import { getUser } from '../lib/api/public';
import routesWithSlug from './routesWithSlug';

import { IS_DEV, PORT_APP, URL_APP } from '../lib/consts';

mobxReact.useStaticRendering(true);

const app = next({ dev: IS_DEV });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // give all Nextjs's request to Nextjs before anything else
  server.get('/_next/*', (req, res) => {
    handle(req, res);
  });

  server.get('/static/*', (req, res) => {
    handle(req, res);
  });