我应该在哪里进行API调用?

时间:2017-10-18 17:40:21

标签: react-native react-redux

React Native相当新,我想应用适当的"良好做法"到我的第一个项目。我正在尝试建立一个黑客新闻客户端。

你可以在这里找到它:https://github.com/napolux/hnative,你可以在我项目的最开始看到我。

我愿意将我所做的API调用分开,以便从当前所在的组件ItemList获取新闻。我的目标是最大化代码重用。

在伪代码中,这就是我所做的:

componentDidMount = () => {
    this.makeApiRequest();
}

makeApiRequest = () => {
    // Ask for data
    // Save data in component state
}

render = () => {
    // Use data to render stuff...
}

我仍然对redux感到困惑,我仍然不确定它是否能够以任何方式满足我的需求并帮助我组织我的代码。

有什么建议吗?

3 个答案:

答案 0 :(得分:3)

你走在正确的轨道上。最常见的错误是将您的API调用放在componentWillMount生命周期钩子中,但您比大多数人更聪明:)

与大多数事情一样,正确的答案虽然不满意,但它取决于"。正如您刚刚开始的那样,我认为您现在正处于正确的轨道上。保持简单直到简单变得难以管理,然后重构以解决这种复杂性。

您可以采用多种策略。我认为你已经开始了正确的第一步"。以下是您可能想要调查的其他策略,但时间恰到好处。

容器组件

您基本上将无状态组件包装在负责获取所需数据的容器中。这将是你的逻辑"下一步"。这里有一些关于这个主题的书签。

API助手

这是我从Tyler McGinnis那里学到的策略,用于我的第一个项目。您基本上将所有API调用放入一个帮助文件中。当您需要调用API时,只需导入并使用它即可。如果需要,您可以轻松地将其与上面的Container策略结合起来。

终极版

Redux应该是你的最后一站。这为项目增加了许多样板,并且需要付出代价。保持简单,直到你需要解决问题Redux真的善于解决。你怎么知道那是什么时候? Dan Abromov写了一篇很棒的文章,所以我会让他告诉你,这样你就可以自己做出折衷。

答案 1 :(得分:0)

您还可以查看this article would be helpful RenderRazorViewToString。您可以将API调用放在mobx @action 方法

答案 2 :(得分:-1)

使用fetch()。在React文档中有一些关于它的信息。 https://facebook.github.io/react-native/docs/network.html