Question

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

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

我设法用redux-thunk执行此操作，但我希望在不添加更多库的情况下实现此功能。

我试图关注＆＃39;容器/演示文稿＆＃39;想法和我在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。我想在承诺解决后我需要发出一个动作，但不知道最好的地方在哪里。

其他问题是：我想只提取一次de数据，我的意思是，仅当用户点击/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切换页面时，组件将卸载。组件的所有数据也被清除。（相信我，这是你想要的。否则你可能会遇到一些让你的浏览器崩溃的系列内存问题）。此外，您的视图仅负责显示内容，不应对其收到的数据执行任何操作。

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

您可以做的另一件事就是问自己为什么不想多次呼叫该端点？数据集是否设置为大？在这种情况下，使用分页并将其分段服务。

React Router，Redux和async API调用

2 个答案: