vscode-snippets-mobx-react README

create code snippets at mobx react now it can support rematch!

normal

React

rmcp

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import PropTypes from 'prop-types'

@inject('store')
@observer
export default class Add extends Component {
  static propTypes = {}
  render() {
    return <div />
  }
}

rmsc

import { observable, action, configure, runInAction } from 'mobx'

configure({ enforceActions: true })

export default class A {
  @observable
  name = ''

  @action
  async functionName(params) {
    runInAction(() => {})
  }
}

rmcpf

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { observer, inject } from 'mobx-react'

@inject('store')
@observer
export default class $1 extends Component {
  static propTypes = {}
  render() {
    return <Fragment />
  }
}

rcws

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Style from './index.less'

export default class $0 extends Component {
  static propTypes = {}
  constructor() {
    super()
    Style.use()
  }

  componentWillUnmount() {
    Style.unuse()
  }
  render() {
    return <></>
  }
}

rpsr

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { createContainer } from 'utils/hoc'

class $1 extends Component {
  static propTypes = {
    actions: PropTypes.object.isRequired
  }
  state = {}
  constructor(props) {
    super(props)
    //this.props.actions.get()
  }

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

const mapState = state => ({
  error: state.common.error
})

const mapDispatch = dispatch => ({
  actions: {
    // createDataTrack: dispatch.common.createDataTrack,
    get: dispatch.idx.get
  }
})

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )($1)
)

trhp

// 创建taro  react hooks page
import { View, Navigator, Image, Text } from '@tarojs/components'
import { Container } from '@/components'
import { useStoreState, useStoreActions } from '@/peasy'
import { useEffect } from '@/hooks'
import global from '@/global'
import { dealParams } from '@/utils/index'
import './index.less'
export default function User() {
  const storeProps = useStoreState(state => state.xxx)
  const storeActions = useStoreActions(actions => actions.xxx)
  useEffect(fn, [])
  return <Container loading={storeProps.loading} error={storeProps.error} force={false} nav={{title: '小电'}} clear={storeActions._setError} />
}
User.config = {}

trcm

// 创建taro  react component
import PropTypes from 'prop-types'
import { Block, View } from '@tarojs/components'

export default function Component(props) {
  return (
    <Block>
      <View />
    </Block>
  )
}

Pagination.propTypes = {}
Pagination.defaultProps = {}

trms

// 创建taro redux model
import { actions } from '@/services/map/list/detail'
export default {
  form: null,
  sync: {
    updateForm(payload) {
      this.form = payload
    }
  },
  async: {
    async getDetail(payload) {
      // action 第二个参数 options 默认为{proxy: true}
      const data = await actions(payload)
      this.form = data
    }
  }
}

Enjoy!