React结合TypeScript和Mobx步骤详解

来源：动视网责编：小采时间：2020-11-27 19:47:08

React结合TypeScript和Mobx步骤详解

React结合TypeScript和Mobx步骤详解:这次给大家带来React结合TypeScript和Mobx步骤详解，React结合TypeScript和Mobx的注意事项有哪些，下面就是实战案例，一起来看一下。为什么要使用TypeScript侦测错误通过静态类型检测可以尽早检测出程序中隐藏的的逻辑错误，对于JavaScript动态的弱

推荐度：

点击下载本文 文档为doc格式

导读React结合TypeScript和Mobx步骤详解:这次给大家带来React结合TypeScript和Mobx步骤详解，React结合TypeScript和Mobx的注意事项有哪些，下面就是实战案例，一起来看一下。为什么要使用TypeScript侦测错误通过静态类型检测可以尽早检测出程序中隐藏的的逻辑错误，对于JavaScript动态的弱

代码如下：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import registerServiceWorker from './registerServiceWorker';
import { Root } from './containers/Root';
import './index.css';
import Container from './containers/Container';
import SignIn from './containers/Auth/signIn';
import SignUp from './containers/Auth/signUp';
const history = createBrowserHistory();
ReactDOM.render(
 <Root>
 <Router history={history}>
 <Switch>
 <Route
 path="/signIn"
 component={SignIn}
 />
 <Route
 path="/signUp"
 component={SignUp}
 />
 <Route
 path="/"
 component={Container}
 />
 </Switch>
 </Router>
 </Root>,
 document.getElementById('root') as HTMLElement
);
registerServiceWorker();

页面的编写

这里描述一写Container这个组件的编写

import * as React from 'react';
import Header from '../../layout/Header';
import { IAuth } from '../../interfaces';
import { Route, Switch } from 'react-router';
import App from '../App';
import Website from '../Website';
// 这部分是坑点，一开始不知道配置，后发现react-rotuer的4.0版本下需要配置prop的接口
interface Container extends RouteComponentProps<{}> {
}
class Container extends React.Component<Container, {}> {
 render () {
 return (
 <p>
 <Header {...this.props} />
 <Switch>
 <Route path="/website" component={Website}/>
 <Route path="/" component={App}/>
 </Switch>
 </p>
 )
 }
}
export default Container;

这样，当我们访问url为'/'的时候，默认会进入Container，其中Container里面是一层子页面，会匹配url，如果url为'/website', 则进入Website页面，若为'/',则进入App页面。

具体关于React-Router的使用请阅读React-Router文档

加入Mobx

npm i mobx react-mobx mobx-react-router -S

重新修改index.tsx的入口配置

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import { useStrict } from 'mobx';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
// 定义需要使用到的store来进行数据状态的管理
import { 
 TokenStore, 
 AuthStore, 
 HostStore, 
 OverViewStore,
 AssetsStore,
 CommonDataStore,
 PageStore,
 RealTimeStore 
} from './stores';
import registerServiceWorker from './registerServiceWorker';
import { Root } from './containers/Root';
import './index.css';
import Container from './containers/Container';
import SignIn from './containers/Auth/signIn';
import SignUp from './containers/Auth/signUp';
// 引入Echarts
import './macarons';
import 'echarts/map/js/world';
// 开启mobx的严格模式，规范数据修改操作只能在action中进行
useStrict(true);
const browserHistory = createBrowserHistory();
const routerStore = new RouterStore();
// 同步路由与mobx的数据状态
const history = syncHistoryWithStore(browserHistory, routerStore);
const rootStore = {
 token: new TokenStore(),
 auth: new AuthStore(),
 host: new HostStore(),
 overview: new OverViewStore(),
 assets: new AssetsStore(),
 commmon: new CommonDataStore(),
 page: new PageStore(),
 realtime: new RealTimeStore(),
 router: routerStore
};
ReactDOM.render(
 <Provider {...rootStore}>
 <Root>
 <Router history={history}>
 <Switch>
 <Route
 path="/signIn"
 component={SignIn}
 />
 <Route
 path="/signUp"
 component={SignUp}
 />
 <Route
 path="/"
 component={Container}
 />
 </Switch>
 </Router>
 </Root>
 </Provider>,
 document.getElementById('root') as HTMLElement
);
registerServiceWorker();

Container容器的修改

import * as React from 'react';
import Header from '../../layout/Header';
import { IAuth } from '../../interfaces';
import { Route, Switch } from 'react-router';
// 使用inject和observer来进行数据监听和数据依赖声明
import { inject, observer } from 'mobx-react';
import App from '../App';
import Website from '../Website';
interface Container extends IAuth {
}
@inject('router', 'auth')
@observer
class Container extends React.Component<Container, {}> {
 render () {
 return (
 <p>
 <Header {...this.props} />
 <Switch>
 <Route path="/website" component={Website}/>
 <Route path="/" component={App}/>
 </Switch>
 </p>
 )
 }
}
export default Container;

@observable 可以在实例字段和属性 getter 上使用。对于对象的哪部分需要成为可观察的，@observable 提供了细粒度的控制。

@inject 相当于Provider 的高阶组件。可以用来从 React 的context中挑选 store 作为 prop 传递给目标组件

组件的接口定义

import { RouteComponentProps } from 'react-router';
import {
 RouterStore,
 AuthStore
} from '../stores';
export interface IBase extends RouteComponentProps<{}> {
 router: RouterStore;
}
export interface IAuth extends IBase {
 auth: AuthStore;
}

Store的配置

先看一下RouterStore:

import { History } from 'history';
import { RouterStore as BaseRouterStore, syncHistoryWithStore } from 'mobx-react-router';
// 路由状态同步
class RouterStore extends BaseRouterStore {
 public history;
 constructor(history?: History) {
 super();
 if (history) {
 this.history = syncHistoryWithStore(history, this);
 }
 }
}
export default RouterStore;

然后是AuthStore:

import { ISignIn, ISignUp } from './../interfaces/index';
import { observable, action } from 'mobx';
import api from '../api/auth'; 
import { IUser } from '../models';
// 登录注册状态
class AuthStore {
 @observable token;
 @observable id;
 @observable email;
 constructor () {
 this.id = '';
 this.token = '';
 this.email = '';
 }
 setLocalStorage ({ id, token, email }: IUser) {
 localStorage.setItem('id', id);
 localStorage.setItem('token', token);
 localStorage.setItem('email', email);
 }
 clearStorage () {
 localStorage.clear();
 }
 @action async signIn (data: ISignIn) {
 try {
 const { data: res } = await api.signIn(data);
 this.id = res.data.id;
 this.token = res.data.token;
 this.email = res.data.email;
 this.setLocalStorage({
 id: this.id,
 token: this.token,
 email: this.email
 });
 return res;
 } catch (error) {
 return error;
 }
 }
 
 @action async signUp (data: ISignUp) {
 try {
 const { data: res } = await api.signUp(data);
 this.id = res.data.id;
 this.token = res.data.token;
 this.email = res.data.email;
 this.setLocalStorage({
 id: this.id,
 token: this.token,
 email: this.email
 });
 return res;
 } catch (error) {
 return error;
 }
 }
 @action signOut () {
 this.id = '';
 this.token = '';
 this.email = '';
 this.clearStorage()
 }
}
export default AuthStore;

Auth是用于网站的登录注册事件以及对应的Token的数据状态保存，登录注册事件的接口请求等操作。

具体的有关Mobx的用法请阅读Mobx文档

目录结构

app
├── api 后端提供的接口数据请求
├── components 编写的可复用组件
├── config 侧边栏以及导航栏配置
├── constants 常量编写
├── interfaces 接口编写
├── layout 布局外框
├── stores mobx的数据状态管理
├── index.css 全局样式
├── index.tsx 页面入口
├── reset.css 浏览器重置样式

本项目使用了Ant-Design来作为依赖的组件库，具体怎么使用以及配置请参考Ant-Design

到这里其实以及完成对React下TypeScript结合React-Router和Mobx的配置。具体的业务模块如何编写有兴趣可以参阅项目tinylog-ui

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！