在React中使用MobX

MobX 提供了一个 mobx-react 包帮助开发者方便地在 React 中使用 MobX。我们在前面已经多次使用的 observer/@observer 就来自这个包。下面介绍 mobx-react 中另外两个常用 API。

Provider: Provider 是一个 React 组件，利用 React 的 context 机制把应用所需的 state 传递给子组件。它的作用与 react-redux 提供的 Provider 组件是相同的。
inject: inject 是一个高阶组件，它和 Provider 结合使用，用于从 Provider 提供的 state 中选取所需数据，作为 props 传递给目标组件。常用方式有如下两种：

inject("store1", "store2")(observer(MyComponent))

@inject("store1", "store2") @observer MyComponent

一个简单示例：

import React, { component } from "react";
import ReactDOM from "react-dom";
import { observer, inject, Provider } from "mobx-react"
import { observable } from "mobx"

@observer
@inject("store")
class App extends Component {
    render() {
        const { store } = this.props;
        return (
            <div>
                <ul>
                    {store.map(todo => <TodoView todo={todo} key={todo.id} />)}
                </ul>
            </div>
        );
    }
}

const TodoView = observer(({todo}) => {
    return <li>{todo.title}</li>
});

// 构造store及其初始数据
const todos = observable([]);
todos.push({id: 1, title : "Task1"});
todos.push({id: 2, title : "Task2"});

ReactDOM.render(
    {/* Provider向 context 中注入 store 对象 */}
    <Provider store={todos}>
        <App />
    </Provider>,
    document.getElementById("root")
);