使用 mobx-react-stores 开发 react 应用

时间 2019-11-13

原文原文链接

原文地址：https://acme.top/mobx-react-stores-docreact

前言

mobx-react-stores 是为了方便将 antd pro 改成使用 mobx 而开发的，里面的思路和代码大量的参考了 dva 和 umi 的实现ios

安装

npm i mobx-react-stores

使用

获取 stores 实例对象shell

import {stores} from 'mobx-react-stores';

状态管理

mobx-react-stores 能够用做状态管理，也是其最核心的目的，接口设计的比较简单，主要就两个：npm

stores.add(model: object | Promise, namespaceAlias: null | string) - 用来向 stores 注入待管理的 model 对象

参数 model 若是为对象则必须包含一个 string 类型的 namespace 属性，用做其在 stores 中的惟一标识，也就是 stores 中的属性名称
参数 model 也能够为一个 Promise 对象，Promise 必须返回一个包含 string 类型的 namespace 属性
参数 namespaceAlias 可选，用来为 model 起别名，若是存在则 model 能够不包含 namespace 属性

dispatch({type, payload}) - 相似 dva 的 dispatch，用来经过 namespace/action 这种形式快速访问 model 对象中的函数

参数 type 为字符串类型，格式为 namespace/action
参数 payload 为任意类型，可选，用于向所调用的函数中传递参数，namespace/action 函数接收到的参数就是 payload
dispatch 通常直接被注入到了上下文中，方便组件调用

监听加载状态

mobx-loading 能实现相似 dva-loading 的效果，方便监听 model 及其 action 的执行状态，减小开发人员对组件 show hide 的操做axios

获取 loadingStore 对象的方法

import {loadingStore} from 'mobx-loading'

mobx-react-stores 默认集成了 mobx-loading，做为 stores 的内置属性，namespace 为 loading，因此能够直接从 stores 中获取 loadingStore 对象数组

const {loading} = stores;

使用方式

// 经过 actions 获取指定 namespace/action 的当前加载状态
loading.actions['goods/fetchList']

// 经过 models 获取指定 namespace 的当前加载状态
// namespace 下任何 action 加载状态为 true，则此 namespace 的加载状态即为 true
loading.models.goods

// 经过 global 获取全局的加载状态
// 只要任何一个 model 的状态为 true，则 global 的状态即为 true
loading.global

// 从 mobx-react-stores 和 mobx-loading 中均可以获取 namespace 装饰器
// 用做 class，方便向 class 中注入 namespace 属性
import {namespace} from 'mobx-loading';
import {namespace} from 'mobx-react-stores';

使用示例

// 获取 namespace 和 loading 装饰器
import {namespace, loading} from 'mobx-react-stores';
import {fetchRandomUser} from "@/services/demo";

// 默认会为 class 添加 namespace 属性，值为将 class 类名转换为首字母小写的字符串
// 此处 namespace 值为 randomUser
@namespace
class RandomUser {

    user;

    message;

    // 经过 loading 装饰器，向 loadingStore 中注入当前 action 的加载状态
    @loading
    fetchUser = async () => {

        this.user = null;
        this.message = null;

        const response = await fetchRandomUser().catch(this.onRejected);

        if (response.results) {
            const user = response.results[0];

            this.change({
                user: {
                    name: `${user.name.first} ${user.name.last}`,
                    email: user.email,
                    picture: user.picture.large
                },
                message: null
            });
        }
    }

    change = ({user, message}) => {
        this.user = user;
        this.message = message;
    }

    onRejected = (e) => {
        return {
            status: 500,
            message: e.message
        }
    }
}

export default new RandomUser();

// -----------------------RandomUser.js--------------------------------

import React from 'react';
import {inject} from 'mobx-react'

@inject(({stores: {dispatch, loading, randomUser}}) => {
    return {
        dispatch,
        randomUser,
        loading: loading.models.randomUser
    }
})
class RandomUser extends React.PureComponent {

    onFetchUser = () => {
        const {dispatch} = this.props;
        dispatch({
            type: 'randomUser/fetchUser'
        })
    }

    render() {
        const {loading, randomUser} = this.props;

        if (loading) {
            // do someting
        }else{
            const {user, message} = randomUser;
            // do someting
        }
    }
}

export default RandomUser;

@loading(names: string | array | null) - loading 装饰器做用于 model 内的函数，能够接收字符串和数组的参数antd
例如： @loading('randomUser/fetchList')、@namespace(['randomUser', 'fetchList']) 与上面的示例代码结果同样app
loading 装饰器优先使用当前 class 的 namespace 属性和函数的名称（首字母小写）生成此 action 的惟一标识，无 namespace 属性则使用 class 的名称（首字母小写）。上门示例中 loading 无参则其函数的加载状态可由 loadingStore.actions['randomUser/fetchList'] 取得less

上面示例中的 loading 是装饰器，与 stores.loading 不一样。stores.loading 是 loadingStore 注入 stores 后的属性dom

路由管理

为了方便管理路由以及向 stores 中注入 model，mobx-react-stores 提供了相似 umi 管理路由的方法，不过没有像 umi 那样去生成临时文件，而是更直接的方式

建议在 src 目录下新建 default.router.js 文件来存放路由，若是模块多而复杂，能够将各个模块的路由分散开来而后聚合到这个文件中

路由示例

export default [
    // user
    {
        path: '/user',
        // 布局文件
        component: () => import('./layouts/UserLayout'),
        LoadingComponent = require('./components/PageLoading').default，
        Routes: [require('./pages/Authorized').default],
        authority: ['admin', 'user'],
        routes: [
            // 从 /user 重定向到 /user/login
            {path: '/user', redirect: '/user/login'},
            {path: '/user/login', name: 'login', component: () => import('./pages/User/Login')},
            {
                name: 'register',
                path: '/user/register',
                models: () => [import('./pages/User/models/register')],
                component: () => import('./pages/User/Register')
            },
            {
                name: 'register.result',
                path: '/user/register-result',
                component: () => import('./pages/User/RegisterResult'),
            },
        ],
    }
]

name - 路由名称，用于生成菜单，name 和 path 都存在的才会生成菜单 ~ Antd Pro 这么定义的
path - 路由的路径
models - model 对象集合，支持按需加载，会与 component 一同加载，支持：() => [import('xxx/model1'), import('xxx/model2')]、() => import('xxx/model1')、[() => import('xxx/model1'), () => import('xxx/model2')] 等形式。主要方便于子路由的 models 和上级路由 models 进行数组合并，一些公共的 models 能够放在上级路由中，方便管理。
component - 组件，若是有下级路由，则是下级路由的布局文件，支持异步按需加载（需提供一个函数，相似：()=>import('xxxx')）
LoadingComponent - 异步按需加载组件时的加载效果组件
Routes - 方便自定义权限校验路由，可参考 Antd Pro 去实现
authority - 访问路由所需的权限，用于权限校验，可参考 Antd Pro 去实现
routes - 子路由集合

使用路由

import {formatterRoutes, renderRoutes} from 'mobx-react-stores';
import router from './default.router.js';

// ... do someting

// 格式化
const routes = formatterRoutes(this.router, this.stores);
// 渲染路由
let children = renderRoutes(routes);

return (
    <Router history={history}>
        {children}
    </Router>
);

// ... do someting

国际化

mobx-react-stores 推荐使用 react-intl 来管理国际化

注入 Locale

import {stores, Locale} from 'mobx-react-stores';

// ... do someting

// 可参考 Antd Pro
const translations = {
    'en-US': {
        messages: {
            ...require('../locales/en-US.js').default,
        },
        locale: 'en-US',
        antd: require('antd/lib/locale-provider/en_US'),
        data: require('react-intl/locale-data/en'),
        momentLocale: '',
    },
    'zh-CN': {
        messages: {
            ...require('../locales/zh-CN.js').default,
        },
        locale: 'zh-CN',
        antd: require('antd/lib/locale-provider/zh_CN'),
        data: require('react-intl/locale-data/zh'),
        momentLocale: 'zh-cn',
    },
    // ... 其余语言包
};

// 注入
stores.add(new Locale('zh-CN', translations));

// ... do someting

切换语言

stores.locale.change('zh-CN');

// 或者

dispatch({
    type: 'locale/change',
    payload: 'zh-CN'
});

集成

为了简化开发，方便使用国际化、history 等，mobx-react-stores 提供了集成好的接口

使用示例

在 src 目录下新建 index.js 文件做为入口文件

// 兼容 IE九、IE10 ~ 若是须要的话请解开封印
// import 'react-app-polyfill/ie9';
// import 'react-app-polyfill/stable';
import React from 'react';
import {LocaleProvider} from 'antd';
import {app} from 'mobx-react-stores';
import get from 'lodash/get';
import './utils/axios'; // 初始化拦截器
import './global.less';
import * as serviceWorker from './serviceWorker';

app.stores = require('./models').default;
app.router = require('./default.router').default;

app.defaultLoadingComponent = require('./components/PageLoading').default;

// 渲染时回调，方便一些额外的操做，好比注入 antd 的国际化
app.renderCallback = (children) => {

    const {locale} = app.stores;

    const antd = get(app.stores, 'locale.translation.antd', undefined);

    if (antd) {
        return (
            <LocaleProvider locale={antd.default || antd}>
                {children}
            </LocaleProvider>
        );
    }

    return children;
};

app.render(document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

集成后

stores 中将得到 intl、routing 两个对象，可用于国际化和操做路由
intl 是 react-intl 注入后的实例对象，可以使用 intl.formatMessage() 等函数
routing 能够实现 routing.push()、routing.replace() 等路由操做