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

有关文档：

正如@fshauge所提到的，有效载荷必须是一个承诺，添加likes的属性会破坏它。我在这些问题中发现了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
    }
  };
}

Answer 2

根据redux-promise的文档，它期望诺言或有效载荷是诺言的Flux标准动作（FSA）。由于添加“喜欢”属性会破坏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;
  }
}

行动中有数字时，Redux-promise不会兑现承诺

2 个答案: