0

我目前正在开发一个应用程序，它是 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 中真正解决这个承诺？

4

2 回答 2

2

对于文档：

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

export function fetchPhotos() {
  const response = axios.get("https://dog.ceo/api/breed/husky/images");
  return {
    type: FETCH_PHOTOS,
    payload: response,
    meta: {
      likes: 0
    }
  };
}
于 2018-07-24T19:13:52.787 回答
0

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

我建议直接从动作创建者返回一个承诺，其中嵌入了“喜欢”属性，如下所示：

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

当 promise 解决时 redux-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;
  }
}
于 2018-07-23T19:35:35.670 回答