随着React的普及，不少大厂的前端必备React相关知识，甚至已有成熟框架应用在生产环境。今天咱们探讨的是React进阶者常常会遇到的MirrorX编写问题，看着前人写的组件，绕着绕着就绕糊涂了。真实案例：可能为了改一个简单的传参，前端开发工程师会耗费在跟代码至少4-5个小时。所以我便作此文，用以帮助正在进阶过程当中的前端工程师们快速理解一个RESTful请求是怎么通过MirrorX的处理，到达组件并激发组件从新渲染。此文大厂前端开发必备。前端
适合读者：具有React基础的程序员、用友UCF开发者、蚂蚁金服Antd开发者。react
MirrorX是基于Redux封装的一种状态机。好比实际使用的时候假设咱们要从后台读个商品接口、把接口返回的数据作一些处理（好比打折的要前端计算折扣金额），而后将处理好的数据显示在界面上。想一想就得用不少代码，并且都要放在组件的类里吧？
要是有一个框架，组件里只须要调一行代码就能解决，是否是很不错？MirrorX就是用来作这件事的。ios
学过面向对象编程的，应该都知道封装性可使控制层代码更加简练。可是React里若是要处理刚才说的那件事，既须要state和props控制权，也要知道来来每每的上下文（好比当前用户是谁、VIP等级是多少），最令React程序员难受的是，当前用户信息在UserView组件里，当前的GoodsView组件没有对UserView组件的访问权。所以，须要有一个统一的地方来跨越组件的障碍，存储这些信息，把这个机制封装好了，就能够实现一行解决。程序员
网上有不少文章讲Redux，看完Redux，再搜索MirroX就能够知道具体的机制。简单的来讲，就是系统有若干个状态仓库，咱们能够把上下文变量都分门别类放在不一样仓库里，好比用户信息、商品信息；放入的时候都是调用动做来实现，好比读取商品信息、更改商品数量。而动做能够选择是否调用服务，若是前台更改商品数量，直接改状态仓库里的数值便可，无需调用服务；若是调用了服务，则通常来讲是功能是须要服务器交互的。web
这里举个请求后台读取商品列表的例子npm
先确保你已经经过npm i安装了mirrorx、react、axios。由于本文是最佳实践，对于如何安装不作赘述。编程
写一个service.js文件（注释多，代码其实没几行）axios
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}) //}
写一个model.js（注释多，代码其实没几行）api
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 }); } } };
第一步、在项目入口的地方添加（好比在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);
这里由于GoodsView只要一加载就须要显示商品列表，所以，咱们能够把代码写在constructor(props)函数里：
// 组件上须要引入MirrorX的actions import { actions} from 'mirrorx'; // 在constructor(props)函数里写上如下调用便可 actions.GoodsManager.GetGoods({ user:props.userId });
而后render里写一下从props.goods（叫作goods是由于第三步GetGoods方法调用updateState方法时传的就是goods，因此当前组件须要从props里接）渲染界面的前端代码，就能够开始测试了。