React + TS + Mobx 示例

3 篇文章 0 订阅

一、创建项目

// 方式一:
create-react-app todo-React-ts-demo --scripts-version=react-scripts-ts
cd todo-React-ts-demo

npm start

// 方式二:
create-react-app todo-React-ts-demo
cd todo-React-ts-demo
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

npx mv 'src/App.js' 'src/App.tsx' 
npx mv 'src/App.test.js' 'src/App.test.tsx' 
npx mv 'src/index.js' 'src/index.tsx'

npm start

// 安装  mobx   mobx-react
npm  install mobx mobx-react -D

二、 配置tsconfig.json

"experimentalDecorators": true // ensure that experimental Decorators are enabled

三、代码示例 -- (基本使用)

说明:对应的示例代码:https://gitee.com/MaGary/todo-react-ts-demo/tree/dev-mobx   // 对应的dev-mobx分支

step1.  创建目录

// 前提:在命令行中操作, 进入到项目的src目录
// 创建 目录
mkdir stores
mkdir models

step2.  定义mobxStore接口

// 创建store类型接口
// IMobxStore.ts:  src/models/IMobxStores.ts,代码如下:
export interface IMobxStore {
    name: string;
    greeting: string;
    setName(name:string):void;
}

step3.  创建mobxStore

// 创建store
// MobxStores.ts:  src/stores/MobxStores.ts,代码如下:
import {action, computed, observable} from 'mobx'
import {IMobxStore} from '../models/IMobxStore'

class MobxStore implements IMobxStore {
    @observable  public name: string = "world"

    @computed
    public get greeting(): string {
        return `hello ${this.name}`
    }

    @action.bound
    public setName(name: string): void{
        this.name = name
    }

}

export default MobxStore

step4. store的初始化

// store的初始化
// index.ts   src/stores/index.ts 代码如下:
import MobxStore from './MobxStores'

export default {
    mobxStore: new MobxStore()
}

step5. 配置Provider

// 配置Provider
// index.ts src/index.tsx中进行配置, 代码如下:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
// 以下 是关键
import {Provider} from 'mobx-react'
import stores from './stores'

ReactDOM.render(
  <Provider {...stores}>
    <App  />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

 step6. 使用store

// 使用Store 
// App.tsx  在src/App.tsx中 使用store, 代码如下:
import * as React from 'react'
import './App.css'

import { inject, observer } from 'mobx-react'
import { IMobxStore } from './models/IMobxStore'

interface IAppProps {
  mobxStore?: IMobxStore  //  这里比较关键 ?表示可或缺,如果没有就会报错。
}

@inject('mobxStore')
@observer
class App extends React.Component<IAppProps, {}> {

  public render() {
    const {greeting} = this.props.mobxStore!;
    
    return (
      <div className="App">
        <header className="App-header">
            {greeting}
          <button onClick={this.clickHandler}>Change Greeting</button>
        </header>
        
      </div>
    );
  }

  private clickHandler = (): void =>{
    const {setName} = this.props.mobxStore!;
    setName("Bob");
  }
}

export default App

四、搭建过程遇到的错误:

step6中 在声明类型的时候,如下 

// App.tsx  在src/App.tsx中 使用store, 代码如下:
// ...............省略代码........................
interface IAppProps {
  mobxStore?: IMobxStore,  //  这里比较关键 ?表示可或缺,如果在<App/>中没有传入 会报错。
  // mobxStore: IMobxStore 
  flag: boolean
}
// ...............省略代码.......................

//编译时错误代码:
“Property 'mobxStore' is missing in type '{}' but required in type 'Readonly<IAppProps>'”

如下图所示:解决的关键 就是 上面代码填写?

否则 需要 在 src/index.tsx中  <App/> 传入相应的props, 
<App mobxStore={mobx实例} flag={true}/>
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值