MobX 中 Provider/Inject 的用法

用法

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'

@inject('store')
@observer
// inject从context中取出store对象，注入到组件的props中
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")
);

@inject 与 @observer 的顺序问题

@inject与@observer的书写有顺序问题。写错顺序会导致inject失效。

// index.tsx
const Main = (props: RouteConfigComponentProps<any>) => {
  return (
    {/* Provider向context中注入store对象 */}
    <Provider {...stores}>
      <Main {...props} />
    </Provider>
  );
};

情景一：

@observer
@inject('homePageStore')
class Main extends React.Component<{}, {}> { ... }

可以看到，homePageStore仍在context中，并未取出注入props。

情景二：

@inject('homePageStore')
@observer
class Main extends React.Component<{}, {}> {}

正确注入到props。