小程序--Taro3.x + TypeScript + Mobx(React-Hook)框架

最近在学习使用Taro框架开发小程序项目，为了规范开发流程选择了结合TypeScript进行开发，状态管理器选择了mobx-react。

CLI工具安装

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

项目初始化

$ taro init myApp

配置mobx-react+react-hook，

参考文档地址：

https://mobx-react.js.org/recipes-context#multiple-global-stores

https://mobx.js.org/README.html

1.首先创建两个store，counterStore和themeStore

// src/store/counter.ts
import { observable } from 'mobx'

const counterStore = observable({
  // observable state
  counter: 0,
  multiple: 2,

  // actions
  counterStore() {
    this.counter++
  },
  increment() {
    this.counter++
  },
  decrement() {
    this.counter--
  },
  incrementAsync() {
    setTimeout(() => {
      this.counter++
    }, 1000)
  },

  // computeds
  get result() {
    return this.counter * this.multiple
  }
})

export default counterStore

// src/store/theme.ts
import { observable } from 'mobx'

const themeStore = observable({
  theme: 'light',
  setTheme(newTheme: string) {
    this.theme = newTheme
  }
})

export default themeStore

2.接下来，创建一个storesContext，其中将包含所有的store，后续开发新增的store也通过这个进行管理。

// src/store/index.ts
import React from 'react'
import counterStore from './counter'
import themeStore from './theme'

export const storesContext = React.createContext({
  counterStore,
  themeStore,
})

3.自定义Hook--useStores，来访问导出的storeContext值。

// src/hooks/use-stores.tsx
import React from 'react'
import { storesContext } from '../store'

export const useStores = () => React.useContext(storesContext)

4.使用store，进行状态管理。

（1）在app.tsx文件引入上下文

// src/app.tsx
import React, { Component } from 'react'
import { Provider } from 'mobx-react'

import { storesContext } from './store'

import './app.scss'

const store = {
  storesContext
}

class App extends Component {
  // this.props.children 就是要渲染的页面
  render () {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
  }
}

export default App

（2）在页面中使用hook获取store值，并通过action进行状态值修改

// src/pages/home/index.tsx
import React from 'react'
import { View, Button } from '@tarojs/components'
import { observer } from 'mobx-react'
import { useStores } from '../../hooks/use-stores'

import './index.scss'

export const Home = observer(() => {

  const { counterStore } = useStores()

  const increment = () => {
    counterStore.increment()
  }

  const decrement = () => {
    counterStore.decrement()
  }

  const incrementAsync = () => {
    counterStore.incrementAsync()
  }

  const { counter } = counterStore

  const res = counterStore.result

  return (
    <View className='homeContainer'>
      <Button onClick={increment}>+</Button>
      <Button onClick={decrement}>-</Button>
      <Button onClick={incrementAsync}>Add Async</Button>
      <View>counter:{counter}</View>
      <View>res:{res}</View>
    </View>
  )
})

export default Home