使用mobx和mobx-react代替redux和react-redux

用mobx和mobx-react代替redux和react-redux已经时大势所趋,既解决越写越零散的reducer,又解决了跨组件引入状态管理的问题。

1、安装,这里又两个包需要安装,mobxmobx-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教程就完成了

你可能感兴趣的:(使用mobx和mobx-react代替redux和react-redux)