用mobx和mobx-react代替redux和react-redux已经时大势所趋,既解决越写越零散的reducer,又解决了跨组件引入状态管理的问题。
1、安装,这里又两个包需要安装,mobx 和 mobx-react
npm i mobx mobx-react --s-d
注意如果要兼容IE必须使用5.x.x或者之前的版本
2、创建mobx主文件(例子创建的目录是mobx/index.js)
引入mobx
class mainStore{
@observable firstState = 0;
@action onClick=()=>{
console.log('触发了action')
}
}
export default mainStore;
3、在任意组件里加入mobx-react并使用
import React from 'react';
import { inject , observer } from 'mobx-react';
@inject('store')
@observer
class test extends React.Component {
constructor(props){
super(props);
console.log(this.props.store.loginState);
this.props.store.onClick('login')
}
}
至此,简单的mobx教程就完成了