我应该把 API 调用放在哪里？

Question

作为 React Native 的新手，我想将适当的“良好实践”应用到我的第一个项目中。我正在尝试构建一个 Hacker News 客户端。

你可以在这里找到它：https : //github.com/napolux/hnative，正如你所看到的，我正处于我的项目的最开始阶段。

我愿意将我为从它们当前所在的组件ItemList获取新闻而进行的 API 调用分开。我的目标是最大化代码重用。

在伪代码中，这就是我所做的：

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

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

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

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

有什么建议吗？

Answer 1

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

与大多数事情一样，正确的答案是不满意的“视情况而定”。由于您刚刚开始，我认为您走在正确的轨道上。保持简单，直到简单变得难以管理，然后重构以解决这种复杂性。

您可以采用多种策略。我认为您已经从正确的“第一步”开始了。不过，在适当的时候，您可能还想研究以下几种其他策略。

容器组件

您基本上将无状态组件包装在负责获取所需数据的容器中。这将是您合乎逻辑的“下一步”。这是我为该主题添加了书签的几篇文章。

• https://css-tricks.com/learning-react-container-components/
• https://voice.kadira.io/let-s-compose-some-react-containers-3b91b6d9b7c8#.qgg1i13vp
• http://krasimirtsonev.com/blog/article/react-js-presentational-container-components

API 助手

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

• https://github.com/geirman/RepairMaps/tree/master/App/Utils

终极版

Redux 应该是你的最后一站。这为项目增加了很多样板，并且需要付出代价。保持简单，直到你需要解决 Redux 非常擅长解决的问题。你怎么知道那是什么时候？Dan Abromov 写了一篇很棒的文章，所以我会让他告诉你，这样你就可以自己权衡了。

• https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367