之前讲到过我们团队从redux迁移到mobx，为什么我们抛弃了redux呢？一个很重要的原因就是使用redux开发，代码量增多，复杂度增大，同时需要维护api，action，reducer，即使是借助redux-thunk或者redux-promise这样的中间件，action这一层的代码量感觉还是太多了，光是actionType的命名都需要斟酌思考，mobx将action和reducer结合到了一起，省去了type的命名，以及es6+的装饰器的引入，整个代码量和复杂度降低了不少，自从用了mobx整个人都轻松了许多！
首先简单介绍一下mobx，他和redux类似数据都是单向流动，通过action改变state，促使view更新
下面让我们来撸一个简单的例子吧
//store.js
import { observable, autorun, flow, computed, when, reaction, action } from 'mobx';
import * as api from './api';
class UserStore {
@observable
basicInfo = {};
// constructor函数里面可以放一些初始化的action
constructor() {
// when如果没有第二个参数，则返回一个promise，配合await或yield使用
when(
// 一旦...
() => false,
// ... 然后
() => this.dispose()
)
}
// 在observable对象发生变化时，会调用，第二个参数表示配置，有delay和onError
auto = autorun(
e => {
// console.log(e);
},
{ delay: 3000 }
);
// autorun的变种，可以更精确的配置对象的属性
myReaction = reaction(() => this.isLogined, isLogined => console.log('myReaction'));
// 类似vue中computed的用法
@computed
get total() {
console.log(this.currentStaffInfo);
return this.currentStaffInfo;
}
getBasicInfo = flow(function*() {
try {
// 这里也可以调用其他action
this.basicInfo = (yield api.queryInfo()).payload;
} catch (error) {
this.basicInfo = {};
}
});
@action
setBasicInfo = value => {
this.basicInfo = value;
};
}
export default new UserStore();
复制代码//User.jsx
import React, { Component } from 'react';
import { observer, Provider, inject } from 'mobx-react';
import UserStore from './store';
@inject('UserStore')
@observer
class User extends Component {
componentDidMount() {
this.props.UserStore.getBasicInfo()
}
render() {
return (
<div>
{this.props.UserStore.basicInfo.name}
</div>
);
}
}
export default (
<Provider UserStore={UserStore}>
<User />
</Provider>
);
复制代码这样就大功告成啦，怎么样，mobx是不是特别简单清爽，mobx还有很多其他特性，希望大家能够多多去探索交流！
转载于:https://juejin.im/post/5c07d21a51882518805aee3a
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/101250.html原文链接：https://javaforall.net
