十分钟上手前端React+MirrorX最佳实践

#十分钟上手前端React+MirrorX最佳实践随着React的普及，很多大厂的前端必

备React相关知识，甚至已有成熟框架应用在生产环境。今天我们探讨的是React

进阶者经常会遇到的MirrorX编写问题，看着前人写的组件，绕着绕着就绕糊涂了。真实案例：可能为了改一个简单的传参，前端开发工程师会耗费在跟代码至少4-5

个小时。因此我便做此文，用以帮助正在进阶过程中的前端工程师们快速理解一个RESTful请求是怎么经过MirrorX的处理，到达组件并激发组件重新渲染。此文大

厂前端开发必备。

适合读者：具备React基础的程序员、用友UCF开发者、蚂蚁金服Antd开发者。

一、概念问答

1、什么是MirrorX？

MirrorX是基于Redux封装的一种状态机。比如实际使用的时候假设我们要从后

台读个商品接口、把接口返回的数据做一些处理（比如打折的要前端计算折扣金额），然后将处理好的数据显示在界面上。想想就得用很多代码，而且都要放在组件的类里吧？要是有一个框架，组件里只需要调一行代码就能解决，是不是很不错？MirrorX就是用来做这件事的。

2、怎么能做到1行解决？

学过面向对象编程的，应该都知道封装性可以使控制层代码更加简练。但是React

里如果要处理刚才说的那件事，既需要state和props控制权，也要知道来来往往

的上下文（比如当前用户是谁、VIP等级是多少），最令React程序员难受的是，

当前用户信息在UserView组件里，当前的GoodsView组件没有对UserView组件

的访问权。因此，需要有一个统一的地方来跨越组件的障碍，存储这些信息，把这个机制封装好了，就可以实现一行解决。

3、具体是怎样的机制？

网上有很多文章讲Redux，看完Redux，再搜索MirroX就可以知道具体的机制。

简单的来说，就是系统有若干个状态仓库，我们可以把上下文变量都分门别类放

在不同仓库里，比如用户信息、商品信息；放入的时候都是调用动作来实现，比

如读取商品信息、更改商品数量。而动作可以选择是否调用服务，如果前台更改

商品数量，直接改状态仓库里的数值即可，无需调用服务；如果调用了服务，则一般来说是功能是需要服务器交互的。

二、如何用MirrorX完成一个功能

这里举个请求后台读取商品列表的例子

1、环境准备

先确保你已经通过npm i安装了mirrorx、react、axios。因为本文是最佳实践，对于如何安装不做赘述。

2、写一个简单的服务（Service）

写一个service.js文件（注释多，代码其实没几行）

import request from "axios";

const URL={

GET_GOODS:"api/template/GetGoods" // 声明要访问的后台接口地址

}

// 暴露出一个名为GetGoodsApi的函数，入参params是Object类型，代表提交给后台的参数列表

// 这个函数会返回一个Promise对象

export const GetGoodsApi = (params) => {

return request(URL.GET_GOODS, {method: "post",params})

}

// 你还可以暴露出其他函数，一个Service可以export const多个函数

// export const GetMember = (params) => {

// return request(URL.GET_MEMBER, {method: "post",params})

//}

3、写一个简单的模型层（Model，包含动作和模型）

写一个model.js（注释多，代码其实没几行）

import { actions } from "mirrorx";

import * as api from "./service"; // 把刚才的service.js引入进来，名称定

为api

export default {

name: "GoodsManager", // 这里写的名字将会成为状态仓库的名称

initialState: { // 这里可以写初始化时状态机里的初始状态

userId: "0001"

},

// reducer：状态机处理函数

reducers: {

// 这个updateState是默认的，它用来主动更新状态机里的各种状态

// state和data都是Object对象

// state是框架传入的，开发者调用的时候，data才是对应的第一个参数

// ...是ES6的对象扩展运算符，后面...data会自动覆盖...state的同名属性

updateState: (state, data) => ({ ...state, ...data }) // 后面还可以写其他的reducer，切记第一个参数一定是state

},

effects: {

// 动作处理函数：获取商品

// param是对象，getState是框架传入的函数对象，用来方便获取当前状态机的状态

// 开发者调用的时候，不用给getState形参赋值

async GetGoods(param, getState) {

// Promise的同步操作运算，获取Axios返回的data

let { data } = await api.GetGoodsApi(param);

// 调用当前状态机的updateState方法（也就是上面写的那个函数）

// 由调用可见，只放了一个Object类型的参数

actions.GoodsManager.updateState({ goods: data.data });

}

}

};

4、改造组件，变成由MirrorX托管组件

第一步、在项目入口的地方添加（比如在app.js上添加在内存中创建状态机的代码）：

// 引入MirrorX的组件

import mirror from 'mirrorx';

// 引入刚刚写的model，注意路径

import model from './model';

// 调用MirrorX，根据模型创建状态机

mirror.model(model);

第二步、在受状态机托管的组件上改一下代码

// 增加对MirrorX的引用

import {connect} from 'mirrorx';

// 这里面GoodsView就是当前受状态机托管组件的class名称，GoodsManager就是第二步里name写的名字

export default connect(state => state.GoodsManager)(GoodsView);

5、在需要调用的地方写下如下代码：

这里因为GoodsView只要一加载就需要显示商品列表，因此，我们可以把代码写在constructor(props)函数里：

// 组件上需要引入MirrorX的actions

import {actions} from 'mirrorx';

// 在constructor(props)函数里写上以下调用即可

actions.GoodsManager.GetGoods({

user:erId

});