「CSDN」十分钟上手 React+MirrorX，从此前端大神代码不再难懂 | 原力计划( 二 ) 作者|杨若瑜来源|CSD

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

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

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

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

1 //引入MirrorX的组件2 import mirror from 'mirrorx' ;3 //引入刚刚写的model ，注意路径4 import model from './model' ;5 //调用MirrorX ，根据模型创建状态机6 mirror.model(model);
第二步、在受状态机托管的组件上改一下代码

1 //增加对MirrorX的引用2 import {connect from 'mirrorx' ;3 //这里面GoodsView就是当前受状态机托管组件的class名称， GoodsManager就是第二步里name写的名字4 export default connect( state = state.GoodsManager)(GoodsView);
5、在需要调用的地方写下如下代码：

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

1 //组件上需要引入MirrorX的actions2 import {actions from 'mirrorx' ;3 //在constructor(props)函数里写上以下调用即可4 actions.GoodsManager.GetGoods({5 user :props.userId6 );
然后render里写一下从props.goods（叫做goods是因为第三步GetGoods方法调用updateState方法时传的就是goods ，所以当前组件需要从props里接）渲染界面的前端代码，就可以开始测试了。

补充说明

状态机里所有的状态值都会被自动写在托管组件的props里，当发生变化时，也是可以从props里取出来，因此不要尝试去获取或更新组件的state 。

只要状态机里的值变化，受到托管的组件会重新执行render方法，实现自动刷新。

实际开发时由于存在组件嵌套、组件元素属性值与状态机里的状态名称冲突，各种疑难杂症随之而来。介于我对于Antd、UCF等成熟框架的分析和实战，得出一个结论，大型系统的model.js、service.js一般不会超过5个，而且大多都有命名规范。

如果是看别人的代码，倒着按顺序找一遍即可，从此前端大神的代码不再难懂。

原文链接：

「CSDN」十分钟上手 React+MirrorX，从此前端大神代码不再难懂 | 原力计划( 二 )

推荐阅读

如何找寻自我

缝纫机调线器怎么安装平车方法如何

强组词强字组词

火笋鸡翅的做法（增肥食谱）

闺女生日快乐祝福语朋友圈

LV请来潮牌设计师做艺术总监，看中的是啥

老虎豆怎么做好吃老虎豆图片怎样弄来吃

暖气有流水声是什么原因

皮球是什么体

手机怎样开通QQ空间

男生发mua说明 mua是什么意思

手指盖凹陷怎么回事

对自己的生活失去掌控咋调整

小米10s怎么没有月亮模式

我想找个偏僻的地方搞养殖！有没有推荐的地方？

南京养老金认证上门服务怎么申请南京市养老金认证

如何评价猪场阉割猪？

最后一个字是豹的成语

泰山散酒怎么样

猫发情的声音(猫发情的叫声)