React Router，Redux和异步API调用

Question

当用户单击链接时，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以及应该在哪里解决返回的fetchData 。 我想我将在诺言解决后需要采取行动，但不确定在哪里进行此操作的最佳位置。

另一个问题是：我只想在用户单击/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)

Answer 2

我认为在路线和景观中这是不可能的。 当您使用React Router切换页面时，组件将卸载。 该组件的所有数据也将被清除。 （相信我，这是您想要的。否则，您可能会遇到一系列serieus内存问题，从而导致浏览器崩溃）。 另外，您的视图仅负责显示内容，而不应使用其接收的数据来执行操作。

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

您可以做的另一件事是问自己，为什么不想多次调用该终结点？ 数据是否设置得很大以便接收？ 在这种情况下，请使用分页并将它分成小块。