Redux thunk - 嵌套调度的函数/动作

Posted 2023-02-22

【中文标题】Redux thunk - 嵌套调度的函数/动作

【英文标题】：Redux thunk - Nesting dispatched functions / actions

【发布时间】：2020-03-06 16:24:55

【问题描述】：

我正在使用 redux-thunk 在我的 react 应用程序中执行异步操作，如下所示：

export const fetchImages = (objects) => dispatch => 
   const promises = objects.map(obj => axios
       .get(`$API_URL/files/$obj.img ? vendor.img : 'default.png'`, responseType: 'arraybuffer')
       .then( res => obj.imgData = 'data:;base64,' + convertArrayBufferToBase64(res.data))
   );
   return Promise.all(promises).then (() => Promise.resolve(objects));

当我在我的任何组件中使用它时，它完全可以正常工作。但是，如果我在另一个动作中使用它，像这样：

export const fetchAllObjects = () => dispatch => axios.get(`$API_URL/objects?limit=50`)
   .then(res => fetchImages(res.data.docs).then(objects => 
       dispatch(
           type: FETCH_ALL_OBJECTS,
           payload: objects
       );
   ));

它失败了。我希望它返回一个承诺，但是它返回“dispatch => ...”，因此then() 在返回值上失败。

【参考方案1】：

我刚刚注意到fetchImages是一个返回函数的函数：

export const fetchAllObjects = () => dispatch => axios.get(`$API_URL/objects?limit=50`)
   .then(res => fetchImages(res.data.docs)(dispatch).then(objects => 
       dispatch(
           type: FETCH_ALL_OBJECTS,
           payload: objects
       );
   ));

【讨论】：

这不是我的意思。我确实想把它放在商店里，fetchAllObjects 方法通常在做它应该做的事情。我只想在我的 fetchAllObjects 操作中使用另一个异步操作 (fetchImages)，但这不起作用

@phoebus 修复刚刚完成 fetchImages 的调用