时间戳

首页 > 解决方案 > 使用 React/redux 添加/删除项目后刷新项目列表的方法

reactjs - 使用 React/redux 添加/删除项目后刷新项目列表的方法

问题描述

我有一个<ItemPage />渲染项目列表的组件和一个添加项目的表单。

render() {
    return (
        <div>
            <ItemsList />
            <AddItemForm />
        </div>
    )
}

我<ItemsList />有一个componentDidMount()方法可以调用 redux props 函数this.props.items()来在组件挂载时列出项目。

当使用<AddItemForm />组件添加项目时，该项目会通过 API POST 请求添加到数据库中。

return dispatch => {
    axios(options)
        .then(response => {
            dispatch({
                type: ITEM_ADDED,
                payload: response.data
            });
        })
        .catch(error => {
            return dispatch(handleError(error))
        });
}

我应该如何刷新列表：

  1. 我应该发出 API GET 请求来获取更新的项目列表吗？
  2. 我应该使用response.data应该发送刚刚创建的项目对象吗？

谢谢您的帮助。

// ===================== 编辑====================

如果我选择第一个选项，则以下代码有效：

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

有丑陋的代码重复，知道我已经有一个 fetch items 功能：

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))
      });
  }
}

请问我该如何解决？

又如何遵循“一个函数只做一件事”的原则？

标签： reactjslistredux

解决方案

我建议在成功的 POST 请求后发出 GET 请求。这可确保您从 API 获得最新的项目对象。

如果您想为自己保存一个 GET，您可以从您的 POST 中获取响应并将其附加到您的 items reducer 状态值。这并没有真正的缺点，我只是更喜欢使用 GET，因为你已经为它声明了一个动作，除非你的 API 很大，否则它不应该导致任何延长或不必要的加载时间。

编辑

你当前使用它的方式，你不会打getItems，因为它是异步的。尝试放入getItems另一个then. 见下文。

return dispatch => {
  axios(postOptions)
    .then(response => {
      dispatch({
        type: ITEM_ADDED,
        payload: response.data
      });  
    })
    .then(()=>getItems())
    .catch(error => {
      return dispatch(handleError(error))
    });
}

并getItems替换options为getOptions.

推荐阅读