反应 redux 多个 http 请求调度答案

【问题标题】：react redux multiple http request dispatch反应 redux 多个 http 请求调度
【发布时间】：2020-12-11 10:34:40
【问题描述】：

我想构建一个类似 trello 的应用程序，为此，我使用了一个模型（板、列表和卡），知道列表模式包含一个板 ID，而卡模型包含一个 listID，我想从我的 API 获取我的数据。

我正在使用 redux，这是我的操作，我基本上为用户获取所有板，然后通过它们映射以获取他们的列表，然后通过他们的列表映射以获取每个列表卡，我想知道是不是做正确的事。

尤其是当调度操作需要一点时间来获取所有数据并且我完成渲染并不是所有数据时（即使在那之后数据都在这里但迟到了）

export const loadData = () => async (dispatch) => {

  const config = {
    headers: {
      "Content-Type": "application/json",
    },
  };
  try {
    axios.get("/api/board/").then((res) => {
      let boards = res.data;

      dispatch({
        type: GET_BOARDS,
        payload: boards,
      });
      dispatch({
        type: GET_ORDER_BOARD,
        payload: boards,
      });
      boards.forEach((board) => {
       
        axios.post("/api/table/", { boardId: board._id }, config).then((res) => {

          dispatch({
            type: GET_LISTS,
            payload: res.data,
          });
          dispatch({
            type: GET_LIST_BOARD,
            payload: res.data,
          });
          lists.forEach((list) => {
            axios
              .post("/api/card/", { listId: list._id }, config)
              .then((res) => {
                dispatch({
                  type: GET_CARDS,
                  payload: res.data,
                });
                dispatch({
                  type: GET_CARD_LIST,
                  payload: res.data,
                });
           
              });
          });
        });
      });
    });
  } catch (error) {
    console.log(error);
  }
};

【问题讨论】：

标签： javascript reactjs redux react-redux trello

【解决方案1】：

视情况而定。

如果您正在执行与 Trello 类似的应用程序，则无需一次性获取所有内容。当您显示板列表时，只需获取板。当您显示单个板时，只需获取该板的数据（表格/列表）。每个表/列表都应该在自己的代码中获取它们的数据（卡片）。

我会以“组件方式”进行获取。 Board 组件应获取其必要的数据（board item 数据，其中包含表格列表，但仅包含它们的 id 和一些必要的属性），类似于 Table 组件和 Board 组件。

然后，您可以在单个组件（或其skeleton implementation）上而不是整个页面上显示例如加载叠加层。

【讨论】：