Question

我想使用POST请求添加项，然后关闭弹出窗口并更新项目列表提出GET请求。使用redux-thunk，我可以在获得POST的结果后调用后两个操作。

现在我想调用 loadAll 操作来填充更新的项目列表，并在调用 toggleAddItem 之前完成状态更改/呈现，这实际上关闭了弹出窗口。

export const loadAllItems = items => ({
    type: LOAD_ALL_ITEMS,
    payload: items
});

export const toggleAddItem = status => ({
    type: TOGGLE_ADD_ITEM,
    payload: status
})

export const loadAll = () => (dispatch => {
    axios.get('/getAllItems').then(res => {
        dispatch(loadAllItems(res.data))
    })
    .catch(err => {
        console.log(err);
    })
});

export const addItemAndRefresh = input => ((dispatch, getState) => {
axios.post('/addItem', input)
  .then(() => {
      axios.get('/getAllItems')
      .then(res => {
          dispatch(loadAll(res.data))
      })
      .then(() => {
          dispatch(toggleAddItem(false));
      })
  })
  .catch(err => {
      console.log(err);
  })
});

使用上面的代码，我设法在 toggleAddItem 之前调用 loadAll 。但是，使用componentDidUpdate日志，我意识到 toggleAddItem 实际上在 loadAll 仍在更新状态/渲染时触发，甚至在前一个操作之前完成。

到目前为止，这是我最好的尝试，但是，我不确定这个序列是否可以避免所有问题。以前的情况是关闭弹出窗口，并使用新项目更新状态。但是，不会呈现新的项目列表（我怀疑这是因为我在渲染功能正常工作时更新状态，因此它会跳过第二次渲染）。

调度后续操作并确保两者都会呈现的最佳实现是什么？

Answer 1

您需要就then操作返回的承诺调用loadAll。

首先通过将loadAll更改为：

来返回该承诺

export const loadAll = () => dispatch => {
    return axios.get('/getAllItems')
      .then(res => {
          dispatch(loadAllItems(res.data))
      })
      .catch(err => {
          console.log(err);
      })
};

然后在mapDispatchToProps调用then中，然后传递一个函数，该函数将在loadAll结算时调用。

const mapDispatchToProps = dispatch => ({
  addItemAndRefresh: dispatch(loadAll())
                      .then(() => dispatch(toggleAddItem(false)))
});

如何一个接一个地调用顺序动作 - 并确保两者都被渲染（react-redux）？

1 个答案: