React Router、Redux 和异步 API 调用答案

【问题标题】：React Router, Redux and async API callReact Router、Redux 和异步 API 调用
【发布时间】：2017-08-27 18:18:04
【问题描述】：

当用户点击一个链接时，React Router 会显示一个组件。该组件将显示的数据来自端点，所以我想知道最佳做法是什么。

我创建了一个名为fetchData 的函数，它使用fetch 在端点中执行GET，然后返回一个promise。一旦这个承诺得到解决，我想调度一个 Redux 操作来更新状态。

我设法用redux-thunk 做到了这一点，但我想在不添加更多库的情况下实现它。

我正在尝试遵循“容器/展示”的理念，并且在 React 中使用无状态功能组件。

总的来说，这就是我正在做的事情：

index.js

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

app.js

const App = () => (
    <div>
      <BrowserRouter>
        <div>
          <Header />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route exact path="/data-list" component={DataListContainer} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
)

dataListContainer.js

const mapStateToProps = (state) => {
  return { data: state.data }
}

const mapDispatchToProps = (dispatch) => {
  return { }
}

const DataListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(DataList)

dataList.js

const DataList = (props) => {
  const rows = props.data.map(data => {
    return <Data data={data} />
  })
  return (
    <div>
      {rows}
    </div>
  )
}

Data 组件只是显示数据。我想知道应该在哪里添加对函数fetchData 的调用以及应该在哪里解决返回的承诺。我想我需要在 promise 解决后调度一个动作，但不确定在哪里执行此操作的最佳位置。

其他问题是：我只想获取一次数据，我的意思是，只有当用户单击/data-list 链接时。如果它返回主页然后再次转到data-list，我不想再次调用端点。 React Route 实现中是否隐藏了 call once 功能？

【问题讨论】：

标签： javascript reactjs redux react-router react-redux

【解决方案1】：

将dataListContainer.js 更改为有状态的 React 组件，这没关系，因为它是容器！代码不要太准确，仅供参考。

import { fetchData, DataList, store } '......'

class DataListContainer extends React.Component {
  componentDidMount() {
    if (!this.props.data) {
      store.dispatch(fetchData())
    }
  }
  render() {
    return (<DataList data={this.props.data}/>);
  }
}

const mapStateToProps = (state) => {
  return { data: state.data }
}

export default connect(
  mapStateToProps
)(DataListContainer)

【讨论】：

【解决方案2】：

我认为这在路线和视图中是不可能的。当您使用 React Router 切换页面时，组件会卸载。组件的所有数据也被清除。（相信我，这是您想要的。否则您可能会遇到一些严重的内存问题，导致浏览器崩溃）。此外，您的视图只负责显示内容，不应该对它接收到的数据做任何事情。

查看您商店中的一些实施。例如，将从 API 接收到的数据存储在 store 对象中。下次有人在存储中调用 fetchData 函数时，提供存储的数据而不是发出新请求。存储永远不会卸载，因此它可以将数据保存在内存中。请记住，如果重新加载整个页面，用户只会收到新数据。所以“硬刷新”但可能有用..

您可以做的另一件事是问自己为什么不想多次调用该端点？数据集是否很大才能接收？在这种情况下，使用分页并分段提供。

【讨论】：