React 和 Redux：从动作类型的有效负载中提取数据答案

【问题标题】：React and Redux: Pulling Data From Payload of Action TypeReact 和 Redux：从动作类型的有效负载中提取数据
【发布时间】：2020-12-07 02:49:39
【问题描述】：

没有得到我在上一个问题中寻求的帮助。我会尝试以不同的方式问它。 DELETE_ITEM 操作类型带有一个有效负载，如果我 console.log 它，它会显示被删除项目的 ID 号。现在，只有在 DELETE_ITEM_SUCCESS 我想从状态中删除它。 DELETE_ITEM_SUCCESS 不附带有效负载。如何从 GET_ITEM 获取有效负载，即 ID 号并在 DELETE_ITEM_SUCCESS 中使用它？任何帮助将不胜感激。谢谢。

//Action types
export const getItems = () => ({
  type: GET_ITEMS
});

export const updateItems = (data) => ({
  type   : UPDATE_ITEMS,
  payload: data
});

export const deleteItem = (itemId) => ({
  type   : DELETE_ITEM,
  payload: itemId
});

//Delete Api
export const apiDeleteRequest = (url, onSuccess, onError) => ({
  type: DELETE_API_REQUEST,
  meta: {url, onSuccess, onError}
});

//Middleware
export const removeItemFlow = ({dispatch, getState}) => next => action => {
  next(action);

  if(action.type === DELETE_ITEM){
      console.log(action.payload)
      dispatch(apiDeleteRequest(`https://jsonplaceholder.typicode.com/todos/${action.payload}`, DELETE_ITEM_SUCCESS, DELETE_ITEM_ERROR));

  }
  if(action.type === DELETE_ITEM_SUCCESS){
    console.log(action.payload)
    dispatch(updateItems(getState().items.itemsList.filter(item => item.id !== action.payload)))
  }
};

【问题讨论】：

apiDeleteRequest 长什么样子？
您是否反对将 ID 作为单独的参数传递给您的 apiDeleteRequest 函数？这可能是我对这个架构所做的事情，否则你需要将它设置在你的状态中以便稍后检索它，我可以想象这会导致异步事情发生。
DELETE_ITEM_SUCCESS 操作负载还包含已删除的项目 ID，这很有意义。你为什么不把它包括在内？
无论您在何处实际调度 DELETE_ITEM_SUCCESS 操作，您都可以简单地将 id 包含为有效负载
我必须补充一点，您刚刚向我们展示的中间件是实际处理 DELETE_API_REQUEST 和 DELETE_ITEM_SUCCESS 的理想场所，而不是进一步将 dispatch() 这些操作处理到其他地方。如果你只是在中间件中处理它们，你的整个问题就消失了。

标签： javascript reactjs redux react-redux axios

【解决方案1】：

这是可以对中间件进行的增强，我在问题下方的评论中提到了这一点。我的建议是直接在中间件内部处理 API 调用，而不是进一步分派操作并将处理委托给其他代码。

export const removeItemFlow = ({ dispatch, getState }) => next => action => {
  next(action);

  if (action.type === DELETE_ITEM) {
    const itemIdToDelete = action.payload

    const url = `https://jsonplaceholder.typicode.com/todos/${action.payload}`
    const onSuccessCallback = () => {
      // do whatever you would do when DELETE_ITEM_SUCCESS
      console.log('You get access to "itemIdToDelete" right here', itemIdToDelete)
      dispatch(updateItems(getState().items.itemsList.filter(item => item.id !== itemIdToDelete)))
    }
    const onErrorCallback = () => {
      // do whatever you would do when DELETE_ITEM_ERROR
      console.log('You get access to "itemIdToDelete" right here', itemIdToDelete)
    }

    axios.delete(url).then(onSuccessCallback, onErrorCallback)
};

【讨论】：