在react / redux / reach路由器应用程序中进行API调用的最佳位置在哪里？

由 发布于 javascriptfetchreactjs
 收藏

我正在努力了解在我的应用中进行API调用的最佳位置在哪里？

我有这样的主要组成部分：

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

and inside Router I have all my routes. some of my other pages require making API calls to a server to get information so im wondering where the best place/best design would be to put these?

I have a component called PageOne and in there I make an API call on mount to retrieve some data and then add it to my redux state. but I also need the same data in my PageTwo component. obviously if the user goes via PageOne > PageTwo this is fine because that data is in the redux store so I just grab it. but im wondering if they went directly to PageTwo or refreshed the page whilst on PageTwo. that data would no longer be fetched.

所以我的选择就像：

  1. fetch the data again on PageTwo. but this seems like I could be making a lot of requests (plus unnecessary requests as I might be fetching when I already have it)
  2. can I put the fetch inside the router component? I guess this would always trigger no matter what page I went too. but again I would be doing unnecessary requests potentially

是否有任何“好的” /最佳实践方法来处理此问题？