javascript - React Router、Redux 和异步 API 调用

Question

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

我创建了一个名为 fetchData 的函数，它使用 fetch 在端点中执行 GET，然后返回一个 promise 。一旦这个 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 。我想我需要在 promise 解决后发送一个操作，但不确定在哪里执行此操作的最佳位置。

另一个问题是:我只想获取数据一次，我的意思是，仅当用户单击 /data-list 链接时。如果它返回主页然后再次返回data-list，我不想再次调用端点。 React Route 实现中是否隐藏了任何一次调用功能？

Answer 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)