时间戳

首页 > 解决方案 > 使用 React/redux 制作干净的双连续 axios 请求

reactjs - 使用 React/redux 制作干净的双连续 axios 请求

问题描述

我需要发出 axiospost请求来更新列表，然后发出 axiosget请求来获取更新的列表。

axios(postOptions)然后，我设法使用以下代码完成了这些操作axios(getOptions)：

export function addItem() {
  ...
  return dispatch => {
    axios(postOptions)
      .then(response => {
        dispatch({
          type: ITEM_ADDED,
          payload: response.data
        });
        // getItems(); // <= unfortunately, this doesn't work, so I repeat some code
        axios(getOptions)
          .then(response => {
            dispatch({
              type: ITEMS_FETCHED,
              payload: response.data
            });
          })
          .catch(error => {
          return dispatch(handleError(error))
          });
      })
      .catch(error => {
        return dispatch(handleError(error))
      });
}

该代码有效，但我重复自己，因为我已经有了这个getItems()功能：

export function getItems() {
  ...
  return dispatch => {
    console.log('I am here') // <= when getItems() is inside addItem() function, 'I am here' is never displayed.
    axios(options)
      .then(response => {
        dispatch({
          type: ITEMS_FETCHED,
          payload: response.data
        });
      })
      .catch(error => {
        return dispatch(handleError(error))
      });
  }
}

重用这个函数可能会更好，但是当函数在getItems()函数内部调用时addItem()，它永远不会进入dispatch().

你能帮我弄清楚出了什么问题吗？

非常感谢。

标签： reactjsreduxaxios

解决方案

getItems 是一个 redux 动作，你需要在 dispatch 中调用它

dispatch(getItems())

推荐阅读