【问题标题】:Dispatching actions in Redux best practices?Redux 最佳实践中的调度操作?
【发布时间】:2016-08-29 21:52:29
【问题描述】:

我有一个正在工作的大型项目,我想知道调度操作的正确方法。

在我的组件容器中,我映射了这个函数。

const mapDispatchToProps = (dispatch) => {
    return {
        ackMessage:(convo)=> {
        chatSocketService.messageAcknowledge(convo, dispatch);
    }
}

您可以看到我正在将调度函数传递给我的服务。

我需要传递调度,以便在套接字事件失败的情况下,我可以在服务内调度错误操作。

这样可以吗?还是将调度始终保存在容器中会更好。如果我把那个套接字服务函数变成一个承诺,那么我可以这样做,但是我们可能会给容器中的调度函数添加太多逻辑?

传递调度对象可以吗?

编辑:这是我的套接字服务的 sn-p。在我的套接字发出的错误事件中,我需要调度一个错误:

const chatSocketService = {
      messageAcknowledge(convo, dispatch) {
       const socketConnection = getSocket();
         socketConnection.emit(socketMessages.ACKNOWLEDGE_MESSAGE, {convoID:convo.convoID, msgID:convo.lastMsg.msgID }, 
            (response)=> {
              socketError(response, convo, dispatch);
             });
      }
}

const socketError = (response, convo, dispatch) => {
  if (response.error === CHAT_SESSION_EXPIRE) {
    sessionExpire(dispatch);
  } else if(response.error) {
   dispatch(convoError(convo.convoID, true));
  }
};

const sessionExpire = (dispatch)=> {
  dispatch(disconnectedMessage('Session has expired. Please log out and log back in'));
  dispatch(socketDisconnected(true));
};

然后在我的 actions.js 中我有这些操作:

export const CONVO_ERROR = 'CHAT_CONVO_ERROR';
export const convoError = (convoID, error) => ({
  type:CONVO_ERROR,
  convoID,
  error
});

export const SOCKET_DISCONNECTED = 'CHAT_SOCKET_DISCONNECTED';
export const socketDisconnected = (disconnected)=> ({
  type:SOCKET_DISCONNECTED,
  disconnected
});

【问题讨论】:

    标签: reactjs containers redux dispatch event-dispatching


    【解决方案1】:

    我认为您应该将调度函数保留在容器中,并将异步 api 调用分离到不同的文件中,然后导入该函数以在此文件中使用。还向我们展示您如何使用 redux-thunk 或 redux-saga 进行诸如 chatSocketSevice 之类的异步调用。我觉得那样我会更有帮助。

    【讨论】:

    • 感谢您的回复。我编辑了我的帖子以包含我的一些套接字服务。
    • 我的操作中没有进行任何异步调用。如果我的发出事件有错误,我只是在等待来自服务器的回调,然后调度一个错误。
    • 所以我认为您的方法没有任何问题,只是随着代码变得越来越大,以后很难调试。所以你使用 redux-saga 或 redux thunk 来避免将 dispatch 作为参数传递。
    猜你喜欢
    • 2017-08-15
    • 2017-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-28
    • 1970-01-01
    • 1970-01-01
    • 2016-04-29
    相关资源
    最近更新 更多