Question

我想在React项目中使用Mobx（如Redux）创建container。

我不希望inject直接在我的组件中，我想要单独的逻辑/视图代码。

任何人都已经用mobx创建了容器？什么是最佳做法？

我的实际代码：

class CategoriesContainers extends React.Component {

  state = {
    categories: [],
    presentations: []
  }

  componentDidMount() {
    this.fetchCategories();
    this.fetchPresentations();
  }

  async fetchCategories() {
    try {
      const categories = await getAllCategories();
      return this.setState({ categories });
    } catch (error) {
      return console.log(error);
    }
  }

  async fetchPresentations() {
    try {
      const presentations = await getAllPresentations();
      return this.setState({ presentations });
    } catch (error) {
      return console.log(error);
    }
  }

  render() {
    return (
      <Categories
        categories={this.state.categories}
        presentations={this.state.presentations}
      />
    );
  }
}

谢谢！

Answer 1

使用mobx我不会使用容器组件，我让mobx在视图和模型之间发挥其魔力。逻辑仅出现在模型中，视图用于显示它。您可能仍需要类似Container的组件，但仅用于将模型与视图连接。或者，如果您愿意，可以使用Provider和@inject。

有了这个，你最终会得到一个自然的视图/逻辑分离。此外，该模型易于测试，无需任何React魔法。

简化的ES6代码：

class Model {
   @observable categories = [];
   @observable presentations = [];

   fetchData() { ... }
}

@observer
class View extends React.Component {
   return() {
       ...
   }
}

class Container extends React.Component {
    constructor(props) {
        super(props);
        this.model = new Model();
        this.model.fetchData();
    }

    render() {
        return <View model=model />;
    }
}

带有react-mobx的容器组件

1 个答案: