React和Redux:在一个功能内调度所有操作

Question

在我的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())

};

Answer 1

我建议您应用所谓的懒惰加载。。。因此，如果在加载仪表板时userProfile是活动选项卡，则仅调度userProfile操作。。。并启动其余动作onRelatedTabMounted

因为最有可能的是，用户会针对特定的信息(评论、邀请…(…所以不需要在仪表板加载中获取所有信息。。。