React 和 Redux：在一个函数中调度所有操作

Posted 2023-02-19

【中文标题】React 和 Redux：在一个函数中调度所有操作

【英文标题】：React and Redux: Dispatching all actions within one function

【发布时间】：2021-02-23 16:11:48

【问题描述】：

在我的反应应用程序中，用户登录，然后在身份验证后定向到他/她的仪表板。为了在仪表板中显示用户的所有数据，我有一个单独的文件，其中有一个名为 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())
    
;

【问题讨论】：

我认为你可以在 reducer 中编写一个单独的 Action 来完成你在 getUserData 中调用的所有动作的任务。

@tim_woods 你的仪表板必须分成一些选项卡...对吗？

@Hend El Sahli 是的，不同的选项卡/组件不同

【参考方案1】：

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

因为很可能，用户将针对特定信息（cmets、邀请...）...因此无需在仪表板加载时获取所有信息...