Redux-promise 在操作中有一个数字时不解决承诺

Question

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

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

动作创作者：

 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 中真正解决这个承诺？

Answer 1

根据 redux-promise 的文档，它需要一个 promise 或一个 Flux Standard Action (FSA)，其中负载是一个 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 resolve 时自动调用 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;
  }
}

Answer 2

文档：

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

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

Redux-promise 在操作中有一个数字时不解决承诺

Redux-promise not resolving a promise when in the action there is a number

reactjs

redux

redux-promise