redux-promise 与 Axios，以及如何处理错误？

Question

因此，我看到一个错误，redux-promise 将错误返回给我:true，连同有效负载，但那是一旦它击中 reducer ......对我来说，将请求和错误条件解耦有点奇怪，似乎不当。使用带有reduc-promise(中间件)的axios时，什么是处理错误情况的有效方法..这是我所拥有的要点..

in action/
const request = axios(SOME_URL);

return {
   type: GET_ME_STUFF,
   payload: request
}

in reducer/
  const startState = {
     whatever: [],
     error: false
  }

  case GET_ME_STUFF:
     return {...state, startState, {stuff:action.payload.data, error: action.error? true : false}}

等等......然后我可以处理错误......所以，我的 api 调用现在分成两个单独的区域，这似乎是错误的......这里一定有我遗漏的东西。我认为在/actions 中我可以传入处理新操作等的回调，但不能拆分它。

Answer 1

我不得不经历类似的情况。挑战在于你可能无法评估 promise 的结果，直到它在 reducer 中。你可以在那里处理你的异常，但这不是最好的模式。从我读过的内容来看，reducers 只是为了根据 action.type 返回适当的状态片段，而不做其他任何事情。

所以，输入一个额外的中间件，redux-thunk。它不是返回一个对象，而是返回一个函数，并且可以与promise共存。

http://danmaz74.me/2015/08/19/from-flux-to-redux-async-actions-the-easy-way/ 上解释得很好[存档here] .本质上，您可以在此处评估 promise 并在 promise 结果到达 reducer 之前通过其他操作创建者进行调度。

在您的操作文件中，添加将处理成功和错误(以及任何其他)状态的其他操作创建者。

function getStuffSuccess(response) {
  return {
    type: GET_ME_STUFF_SUCCESS,
    payload: response
  }
}

function getStuffError(err) {
  return {
    type: GET_ME_STUFF_ERROR,
    payload: err
  }
}

export function getStuff() {
  return function(dispatch) {
    axios.get(SOME_URL)
      .then((response) => {
        dispatch(getStuffSuccess(response))
      })
      .catch((err) => {
        dispatch(getStuffError(err))
      })
  }
}

return null

这大致是您如何将伪代码转换为链接中解释的内容。这处理直接在你的 Action 创建者中评估 promise ，并按照 Action -> reducer -> 状态 -> 组件更新周期的约定向你的 reducer 触发适当的 Action 和有效负载。我自己对 React/Redux 还是很陌生，但我希望这会有所帮助。