Question

我是React和Redux的新手，所以这是一个最佳实践问题。

我有一个动作创建者，它会触发API调用并将响应发送到我的reducer：

export function loadDrawSuccess(draw) {
  return { type: ActionTypes.LOAD_DRAW_SUCCESS, draw};
}

export function loadDraw() {
  return function(dispatch) {
    dispatch(beginAjaxCall());
    return drawApi.getDraw().then(draw => {
      dispatch(loadDrawSuccess(draw));
    }).catch(() => {
      dispatch(ajaxCallError());
    });
  };
}

现在....在我的reducer中，我正在处理响应以从中提取我需要的数据.....

function extractNextOpenDraw(draws) {
  if (!draws || typeof draws.content === 'undefined'){
    return {};
  }
  let openDraws = draws.content.filter(draw => {return draw.status === 'open';});
  let sortedOpenDraws = openDraws.sort((draw1, draw2) => {
    return DateHelper.getDateObjectFromUtcDateString(draw1.closeTimeUtc) - DateHelper.getDateObjectFromUtcDateString(draw2.closeTimeUtc);
  });
  return sortedOpenDraws[0];
}


export default function drawReducer(state = initialState.draw, action) {

  switch (action.type) {
    case types.LOAD_DRAW_SUCCESS: {
      return objectAssign({}, extractNextOpenDraw(action.draw), {dateModified: action.dateModified});
    }
    ........

    default:
      return state;
  }
}

我的问题是

我是否正确处理reducer中的响应，或者应该在API类或动作创建者中处理？
在API没有错误地返回但是响应格式不符合预期格式的情况下，我想要调度ajaxCallError（）动作。在reducer中这样做是否正确？

Answer 1

不，减速器应该尽可能干净，并且只使用提供给它的值更新商店。您应该在操作本身中解析响应，或者为api创建一个包装器。我相信在行动中这样做是足够好的。
不，处理操作中的所有此类错误并将其发送到那里。减速器不能也不应该发送动作。

React / Redux：从API响应处理数据和从reducers调度操作的位置

1 个答案: