十分钟上手 React+MirrorX，从此前端大神代码不再难懂

作者 | 杨若瑜

来源 | CSDN博客，责编 | 夕颜

头图 | 付费下载自视觉中国

出品 | CSDN（ID:CSDNnews）

随着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文件（注释多，代码其实没几行）

 1import request from "axios";
 2const URL={
 3    GET_GOODS:"api/template/GetGoods" // 声明要访问的后台接口地址
 4}
 5// 暴露出一个名为GetGoodsApi的函数，入参params是Object类型，代表提交给后台的参数列表
 6// 这个函数会返回一个Promise对象
 7export const GetGoodsApi = (params) => {
 8    return request(URL.GET_GOODS, {method: "post",params})
 9}
10// 你还可以暴露出其他函数，一个Service可以export const多个函数
11// export const GetMember = (params) => {
12//    return request(URL.GET_MEMBER, {method: "post",params})
13//}

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

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

 1import { actions } from "mirrorx";
 2import * as api from "./service"; // 把刚才的service.js引入进来，名称定为api
 3
 4export default {
 5    name: "GoodsManager", // 这里写的名字将会成为状态仓库的名称
 6    initialState: { // 这里可以写初始化时状态机里的初始状态
 7        userId: "0001"
 8    },
 9    // reducer：状态机处理函数
10    reducers: {
11        // 这个updateState是默认的，它用来主动更新状态机里的各种状态
12        // state和data都是Object对象
13        // state是框架传入的，开发者调用的时候，data才是对应的第一个参数
14        // ...是ES6的对象扩展运算符，后面...data会自动覆盖...state的同名属性
15        updateState: (state, data) => ({ ...state, ...data })
16        // 后面还可以写其他的reducer，切记第一个参数一定是state
17    },
18    effects: {
19        // 动作处理函数：获取商品
20        // param是对象，getState是框架传入的函数对象，用来方便获取当前状态机的状态
21        // 开发者调用的时候，不用给getState形参赋值
22        async GetGoods(param, getState) {
23            // Promise的同步操作运算，获取Axios返回的data
24            let { data } = await api.GetGoodsApi(param);
25            // 调用当前状态机的updateState方法（也就是上面写的那个函数）
26            // 由调用可见，只放了一个Object类型的参数
27            actions.GoodsManager.updateState({ goods: data.data });
28        }
29    }
30};

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

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

1// 引入MirrorX的组件
2import mirror from 'mirrorx';
3// 引入刚刚写的model，注意路径
4import model from './model';
5// 调用MirrorX，根据模型创建状态机
6mirror.model(model);

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

1// 增加对MirrorX的引用
2import {connect} from 'mirrorx';
3// 这里面GoodsView就是当前受状态机托管组件的class名称，GoodsManager就是第二步里name写的名字
4export default connect(state => state.GoodsManager)(GoodsView);

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

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

1// 组件上需要引入MirrorX的actions
2import {actions} from 'mirrorx';
3// 在constructor(props)函数里写上以下调用即可
4actions.GoodsManager.GetGoods({
5    user:props.userId
6});

然后render里写一下从props.goods（叫做goods是因为第三步GetGoods方法调用updateState方法时传的就是goods，所以当前组件需要从props里接）渲染界面的前端代码，就可以开始测试了。