Question

我正在寻求将事件源或 websockets 与 redux 结合起来的任何人的帮助。

我第一次尝试构建 CQRS 系统的前端，其中向 2 个不同的端点发出 GET 和 POST 请求。发出 POST 请求后，应用程序会侦听 GET 端点以等待数据到达。发生这种情况的情况有多种，因此我不能仅仅依靠相同的 EventSource 或 Websocket 端点来传递所有数据。以下是操作顺序：

发出初始请求，显示加载指示器
开始使用 EventSource 监听
发出 POST 请求以创建数据
EventSource 接收响应，将更新的状态发送到商店
隐藏加载指示器，相应地更改用户界面

问题是 - 这些事件是否应该在 redux 操作中发生，因为用户需要同时等待它们？是否应该在 Context hook 中与 redux 分开，并且只有当它返回数据时才会将某些内容分派给 redux 操作？还有什么？

以下是我如何将其合并到一个动作中：

export const createCommentLoading = () => ({
  type: CommentTypes.CREATE_COMMENT_LOADING,
});

export const createCommentSuccess = (payload) => ({
  type: CommentTypes.CREATE_COMMENT_SUCCESS,
  payload,
});

export const createCommentEventSuccess = (payload) => ({
  type: CommentTypes.CREATE_COMMENT_EVENT_SUCCESS,
  payload,
});

export const createCommentError = (error: any) => ({
  type: CommentTypes.CREATE_COMMENT_ERROR,
  error,
});

export const createComment = (options) => async (dispatch) => {
  dispatch(createCommentLoading());

  // open up listener to GET the new posts
  const listener = new EventSource(CommentsApi.listenToNewComments);
  listener.onmessage = (data) => { 
    if(foundCorrectData) {
       createCommentEventSuccess(data);
       listener.close()
    }
  }

  // make POST request
  CommentsApi.createComment(options);
    .then((result) => dispatch(createCommentSuccess(result)))
    .catch((err) => dispatch(createCommentError(err)));
};

非常感谢任何帮助！

如何使用 redux thunk 合并 POST 请求 + 监听 EventSource 数据

0 个答案: