1

我的应用程序已经发展到一定程度，同一父母的孙子孙女之间的可靠性变得一团糟 - 我需要状态管理，而 MobX 是选择，因为应用程序的复杂性和团队规模相对较低（它只是我）。Redux 似乎有点矫枉过正。

我正在尝试学习 MobX，但对如何将它与 Ajax 调用等集成有点困惑。我正在使用 Axios 从 REST API 获取数据。

我当前的组件结构是分层的，如下所示：

            <Container /> // Dummy component
     <Child 1 />     <Child 2 /> // Ajax calls exist in both
<Grandchild 1.1 /> <Grandchild 1.1 /> // There are ~10 for each

我axios在 Child 1 和 Child 2 中都发出 get 请求，将其调用 in componentDidMount，并使用单向数据流将数据向下传播给子代，就像在 React 中通常那样。

假设我的<Child 1/>组件现在看起来像这样：

class Child1 extends React.Component {
    // Set initial state etc.
    loadData = () => {
        let that = this;
        axios.get("/api/child1/").then(function(response){
            that.setState({data: response.data });
        }).catch(function(error){
            // Handles error
            })
    };

    componentDidMount () {   
        this.loadData();
    }
// Continues .. 
}

现在我切换到 MobX 后，它应该在结构中的axios.get什么位置，以及如何从其中访问它Child1？

假设我有不同的axios.get调用，它们是否都应该存在于一个store.js文件中并被调用this.props？

4

0 回答 0