在我的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原因很可能是,用户将针对特定信息(评论,邀请等)...因此,无需在仪表板上加载所有信息即可...

09-10 05:36