如何在createAsyncThunk中通过Axios同时获取响应头与数据

问题原因 #

直接返回Axios的完整Response对象时，对象里包含不可序列化的属性（比如请求配置中的函数、循环引用对象等），Redux处理action payload的序列化操作时会触发报错，虽然功能能正常运行，但控制台会出现警告或错误信息。

解决方案 #

不要返回完整的Axios Response，手动提取需要的data和headers字段，返回一个自定义的可序列化对象即可：

修改异步请求代码 #

export const fetchPizzas = createAsyncThunk("items/fetchPizzasStatus", async (params) => {
  const { category, sortBy, order, search, perPage, currentPage } = params;
  const res = await axios.get(`http://localhost:3001/items?${category}&q=${search}&_sort=${sortBy}&_order=${order}&_page=${currentPage}&_limit=${perPage}`);
  // 只返回需要的可序列化数据
  return {
    data: res.data,
    totalCount: res.headers["x-total-count"]
  };
});

同步修改Reducer处理逻辑 #

[fetchPizzas.fulfilled]: (state, action) => {
  state.status = "success";
  state.pizzas = action.payload.data;
  state.itemsCount = action.payload.totalCount;
},

原理说明 #

自定义的对象只包含数组、字符串、数字这类普通可序列化类型，完全符合Redux对action payload的序列化要求，既解决了控制台报错问题，又能正常获取分页所需的总条目数。

内容的提问来源于stack exchange，提问作者Anton Kondratovich