如何在Redux Thunk中获取Axios返回的单条数据而非数组？

情况1：后端返回数组但你只需要单个元素 #

如果API返回的数组里仅包含你需要的单个数据项，直接提取数组的第一个元素即可：

// Redux Thunk 异步 action
export const fetchMetrics = (data) => async (dispatch) => {
  try {
    const res = await axios.post(`/metrics`, data);
    // 提取数组中的第一个元素（转为非数组形式）
    const singleMetric = res.data[0];
    // 分发action到reducer
    dispatch({ type: 'FETCH_METRICS_SUCCESS', payload: singleMetric });
  } catch (error) {
    dispatch({ type: 'FETCH_METRICS_FAILURE', payload: error.message });
  }
};

情况2：将数组转换为键值对对象 #

如果需要把数组转换成以某个字段为键的对象（比如用每个项的id作为key），可以用Array.reduce()处理：

export const fetchMetrics = (data) => async (dispatch) => {
  try {
    const res = await axios.post(`/metrics`, data);
    // 将数组转换为键值对对象，以id为键
    const metricsObj = res.data.reduce((acc, item) => {
      acc[item.id] = item;
      return acc;
    }, {});
    dispatch({ type: 'FETCH_METRICS_SUCCESS', payload: metricsObj });
  } catch (error) {
    dispatch({ type: 'FETCH_METRICS_FAILURE', payload: error.message });
  }
};

情况3：要求后端调整返回格式 #

如果上述前端处理都不符合需求，最直接的方式是和后端开发人员沟通，让他们修改API的返回结构，直接返回对象形式的数据，而非数组。

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