在我的react应用程序中,用户登录后根据身份验证将其定向到他/她的仪表板。为了在仪表板上显示用户的所有数据,我有一个单独的文件,其中有一个名为getUserData()的函数,该函数调度仪表板组件的所有操作,然后在loadUser()中调用getUserData(),因此每个应用呈现的时间计算出loadUser()的时间。随着应用程序的增大,这是一种显示用户数据的好习惯和有效方式吗?还是有更好的方法来做到这一点,如果可以,我很想知道。谢谢你。
//App.js
const token = localStorage.getItem('token')
store.dispatch({type: USER_LOADING});
if(token){
store.dispatch({type: USER_AUTHENTICATED})
}
class App extends Component{
componentDidMount(){
store.dispatch(loadUser());
}
render(){
return(
<Provider store={store}>
<div className="App">
<Router>
<Switch>
<Route exact path="/login" component={LoginPage}/>
<ProtectedRoute exact path="/dashboard" component={Dashboard}/>
</Switch>
</Router>
</div>
</Provider>
);
}
};
export default App;
//加载用户export const loadUser = () => (dispatch, getState) =>{
//dispatch(getNetworkList(config))
axios.get('/api/user/', setAuthorizationHeader(getState))
.then(res => {
dispatch({
type: USER_LOADED,
payload: res.data
})
dispatch(getUserData())
})
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status));
dispatch({
type: AUTH_ERROR
});
});
};
//获取用户数据export const getUserData = () =>(dispatch) =>{
dispatch(userProfile())
dispatch(getComments())
dispatch(getInvites())
dispatch(getNotifications())
dispatch(getMessages())
dispatch(getProjects())
dispatch(getConnections())
dispatch(getReply())
dispatch(getPendingRequests())
dispatch(getAssignedTasks())
};
最佳答案
我建议您应用所谓的延迟加载 ...,因此,如果userProfile是加载仪表板时的事件选项卡,则仅分派(dispatch)userProfile
操作...
并执行剩下的 Action onRelatedTabMounted
原因很可能是,用户将针对特定信息(评论,邀请等)...因此,无需在仪表板上加载所有信息即可...