当操作中有一个数字时，Redux-promise 没有解决一个承诺

Posted 2023-02-22

【中文标题】当操作中有一个数字时，Redux-promise 没有解决一个承诺

【英文标题】：Redux-promise not resolving a promise when in the action there is a number

【发布时间】：2018-12-31 07:37:10

【问题描述】：

我目前正在开发一个应用程序，它是 Instagram 的副本。它与 React-Redux 一起使用，通过 axios 调用外部 API 来获取实际上是博客文章的照片。我还需要传递我在 fetchPhotos 动作创建器中添加的每个点赞的数量（所以为 0），这会导致我的应用程序崩溃。每当动作创建者只返回类型和有效负载时，这都可以正常工作。

当我在控制台记录该操作时，实际上发现承诺现在没有得到解决，因此出现了错误。

动作创建者：

 export function fetchPhotos() 
  const response = axios.get("https://dog.ceo/api/breed/husky/images");
  return 
    type: FETCH_PHOTOS,
    payload: response,
    likes: 0
  ;

减速机：

export default function(state = [], action)   
  switch(action.type) 
    case FETCH_PHOTOS:
    console.log(action);
      return [action.payload.data.message, action.likes];
    default:
      return state;
    

应用内：

const history = createBrowserHistory();

const store = createStore(
  connectRouter(history)(reducers),
  compose(applyMiddleware(routerMiddleware(history), ReduxPromise))
);

有没有办法让动作创建者在 action.payload 中真正解决这个承诺？

【问题讨论】：

我认为这是因为操作不是 FSA-compliant：“操作不得包含类型、有效负载、错误和元数据以外的属性。”

这很有意义！除了添加具有固定投票数的数据文件夹之外，您对如何包含此类信息有任何建议吗？

【参考方案1】：

根据redux-promise 的文档，它需要一个promise 或一个Flux Standard Action (FSA)，其中payload 是一个promise。由于添加 'likes' 属性会破坏 FSA 合规性，因此它必须以某种方式位于有效负载中。

我建议直接从动作创建者返回一个带有“likes”属性的承诺，如下所示：

export async function fetchPhotos() 
  const response = await axios.get("https://dog.ceo/api/breed/husky/images");
  return 
    type: FETCH_PHOTOS,
    payload: 
      data: response.data,
      likes: 0
    
  ;

redux-promise 会在 promise 解析时自动调用 dispatch，你可以在你的 reducer 中使用如下代码：

export default function (state = [], action) 
  switch (action.type) 
    case FETCH_PHOTOS:
      console.log(action);
      return [action.payload.data.message, action.payload.likes];
    default:
      return state;
  

【讨论】：

不幸的是，这会导致 data.message 未定义

【参考方案2】：

文档：

正如@fshauge 所提到的，有效负载必须是一个承诺，并且添加喜欢的属性会破坏它。我在问题中找到了this，这解决了我的问题。 likes 属性实际上必须进入 meta，因此正确运行的最终结果是：

export function fetchPhotos() 
  const response = axios.get("https://dog.ceo/api/breed/husky/images");
  return 
    type: FETCH_PHOTOS,
    payload: response,
    meta: 
      likes: 0
    
  ;