mobx-react三分钟入门

1.创建一个stores

const stores = {
    store1,
    store2
};

export default stores;

2.编写store1

@observable

装饰器可以在 ES7 或者 TypeScript 类属性中属性使用，将其转换成可观察的。 @observable 可以在实例字段和属性 getter 上使用。 对于对象的哪部分需要成为可观察的，@observable 提供了细粒度的控制

action

用法:

action(fn);
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}

任何应用都有动作。动作是任何用来修改状态的东西。 使用MobX你可以在代码中显式地标记出动作所在的位置。 动作可以有助于更好的组织代码

demo

import { observable, action } from 'mobx';
import axios from 'axios';

class AddFriend {
    @observable show = false;
    user;
	@computed get total() {
        return this.price * this.amount;
    }

    @action toggle(show = self.show, user = self.user) {
        self.show = show;
        self.user = user;
    }

    @action async sendRequest(message) {
        var auth = await storage.get('auth');
        var response = await axios.post(`/cgi-bin/mmwebwx-bin/webwxverifyuser?r=${+new Date()}`, {
            BaseRequest: {
                Sid: auth.wxsid,
                Uin: auth.wxuin,
                Skey: auth.skey,
            },
            Opcode: 2,
            SceneList: [33],
            SceneListCount: 1,
            VerifyContent: message,
            VerifyUserList: [{
                Value: self.user.UserName,
                VerifyUserTicket: '',
            }],
            VerifyUserListSize: 1,
            skey: auth.skey,
        });

        return +response.data.BaseResponse.Ret === 0;
    }
}

const self = new AddFriend();
export default self;

3.注入项目入口文件

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { HashRouter } from 'react-router-dom';
import stores from './js/stores';

class App extends Component {
    render() {
        return (
            <Provider {...stores}>
                <HashRouter>
                     <Switch>
                        <Route exact path="/" component={Component} />
                        <Route exact path="/contacts" component={Component} />
                        <Route exact path="/settings" component={Component} />
                     </Switch>
                </HashRouter>
            </Provider>
        );
    }
}

render(
    <App />,
    document.getElementById('root')
);

4.在react组件中使用

@observer

observer 函数/装饰器可以用来将 React 组件转变成响应式组件。 它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。

inject

选择性注入stores的数据

demo

import React, { Component } from 'react';
import { Modal, ModalBody } from 'components/Modal';
import { inject, observer } from 'mobx-react';

import classes from './style.css';

@inject(stores => ({
    me: stores.session.user,
    show: stores.addfriend.show,
    close: () => stores.addfriend.toggle(false),
    sendRequest: stores.addfriend.sendRequest,
}))
@observer
export default class AddFriend extends Component {
    addFriend() {
        this.props.sendRequest(this.refs.input.value);
        this.props.close();
    }

    render() {
        var { me, show, close } = this.props;

        return (
            <Modal
                fullscreen={true}
                onCancel={e => close()}
                show={show}>
                <ModalBody className={classes.container}>
                    Send friend request first

                    <input
                        autoFocus={true}
                        defaultValue={`Hallo, im ${me && me.User.NickName}`}
                        ref="input"
                        type="text" />

                    <div>
                        <button onClick={e => this.addFriend()}>Send</button>

                        <button onClick={e => close()}>Cancel</button>
                    </div>
                </ModalBody>
            </Modal>
        );
    }
}