在装载时使用REST API-State或GET进行响应

Question

我们目前正在构建一个React-Redux前端，该前端具有由Node提供支持的REST API后端。我不确定在安装组件时是使用Redux还是简单调用API。

该组件是一个简单的配置文件列表，将在整个网站上显示（但不是一直显示）。

很抱歉问这个问题。也许有什么可以通读的？

Answer 1

我建议您看两件事：

1） Facebook上的第一个React教程被低估了：https://facebook.github.io/react/docs/thinking-in-react.html

它揭示了一种非常清晰的方式来思考如何思考你的观点的树状结构。

2） 从那里开始，阅读有关容器和组件的内容：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

这篇文章解释了React组件经常做两件事：充当渲染器和控制器（在MVC上同时使用V和C）。

现在，您的React视图需要的是一个控制器。无论何时装载组件都要获取它，这与两个不同的问题重叠：如何显示信息和如何获取信息

您可以使用一个更大的React组件来管理应用程序的完整状态：

class MyApp extends React.Component {
  componentDidMount() {
    fetch('/profiles').then(res => res.json().then(::this.setState))
  }
  render() {
    if (this.state) {
      return <ProfileList profiles={this.state} />
    } else {
      return <span>Loading...</span>
    }
  }
}

那就是你的"容器"。您的"组件"是配置文件列表的纯表示，不需要关心如何检索该信息：

class ProfileList extends React.Component {
  render() {
    return <ul>
      {
        this.props.profiles.map(
          profile => <li key={profile.id}>{profile.name}</li>
        )
      }
    </ul>
  }
}

Redux只是实现这一点的另一种方法，它可以更好地重用信息，并使相同的信息可用于不同的组件（将"存储"的实例隐藏为mixin）。结构顶部的MyApp类具有与redux中的Provider类类似的功能：允许子组件访问显示自身所需的信息。