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

Question

我很难理解在我的应用程序中进行API调用的最佳位置在哪里？

我的主要组件是这样的：

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

在CCD_ 1内部，我有我所有的路线。我的其他一些页面需要对服务器进行API调用以获取信息，所以我想知道把这些放在哪里是最好的地方/最好的设计？

我有一个名为PageOne的组件，在那里我在装载时调用API来检索一些数据，然后将其添加到我的redux状态。但我的CCD_ 3组件中也需要相同的数据。很明显，如果用户通过PageOne>PageTwo，这很好，因为数据在redux存储中，所以我只是抓取它。但我想知道他们是直接转到PageTwo还是在PageTwo上刷新页面。该数据将不再被提取。

所以我的选择感觉像：

1. 在PageTwo上再次获取数据。但这看起来像是我可能会发出很多请求(加上不必要的请求，因为我可能会在已经有了请求的情况下提取(
2. 我能把fetch放在路由器组件里吗？我想无论我上了哪一页，这都会触发。但我可能会再次提出不必要的请求

有什么"好"/最佳实践的方法来处理这个问题吗？

Answer 1

您需要将数据获取逻辑放在redux操作中，只要您想获取数据，就需要调用相同的调度操作。

像这样：

return async dispatch => {
const res = await axios.post(`${rootUrl}/login`, data);
localStorage.setItem("authToken", 
JSON.stringify(res.data.authToken));
// Set token
// setTokenToAxios(res.data.authToken);
dispatch({
type: USER_LOGIN_SUCCESS,
data: res.data.authToken
});
};

您可以在componentDidMount中调度或调用操作，也可以在.中使用useEffect((

您可以将invoke或dispatch操作放在具有标志的两个组件中，以避免不必要的数据获取。