使用Axios进行redux-promise，以及如何处理错误?

问题描述

所以，我看到一个错误，redux-promise 将 error: true 和有效载荷一起返回给我，但是一旦它碰到了减速器......对我来说，将请求和错误条件解耦有点奇怪，而且似乎不合适.使用带有reduc-promise(中间件)的axios 时处理错误情况的有效方法是什么.. 这是我所拥有的要点..

So, I see on an error, redux-promise hands me back error: true, along with the payload, but that is once it hits the reducer... to me, decoupling the request AND error condition is a bit odd, and seems inappropriate. What is an effective way to also deal with error condition when using axios w/ reduc-promise (middleware).. here is the gist of what i have..

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 中我可以传入一个回调来处理一个新的动作等......或其他东西，但不能拆分它.

etc... then I can deal with the error.. so, my api call is now split into two seperate areas and that seems wrong.... there must be something I am missing here. I would think in the /actions I can pass in a callback that handles a new action etc.. or something, but not split it.

推荐答案

我也遇到过类似的情况.挑战在于您可能无法评估 promise 的结果，直到它出现在 reducer 上.你可以在那里处理你的异常，但这不是最好的模式.从我读过的内容来看，reducer 仅用于根据 action.type 返回适当的状态片段，而不执行其他任何操作.

I've had to go through a similar situation. The challenge is that you likely won't be able to evaluate the results of the promise until it is at the reducer. You could handle your exceptions there but it's not the best pattern. From what I've read reducers are meant only to return appropriate pieces of state based on action.type and do nothing else.

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

So, enter an additional middleware, redux-thunk. Instead of returning an object, it returns a function, and it can coexist with promise.

http://danmaz74.me/2015/08/19/from-flux-to-redux-async-actions-the-easy-way/ [存档 这里].本质上，您可以在此处评估承诺，并在承诺结果到达减速器之前通过其他动作创建者进行分派.

It's explained quite well at http://danmaz74.me/2015/08/19/from-flux-to-redux-async-actions-the-easy-way/ [archived here]. Essentially, you can evaluate the promise here and dispatch through the other action creators before the promise result hits the reducers.

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

In your actions file, add additional action creators that would handle the success and error (and any other) states.

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

这大致是您如何将伪代码转换为链接中解释的内容.这会直接在您的动作创建者中处理对承诺的评估，并将适当的动作和有效负载触发到您的减速器，这遵循动作 -> 减速器 -> 状态 -> 组件更新周期的约定.我自己对 React/Redux 还是很陌生，但我希望这会有所帮助.

This is roughly to how you might translate your pseudocode to what is explained at the link. This handles evaluating the promise directly in your action creator and firing off the appropriate actions and payloads to your reducers which follows the convention of action -> reducer -> state -> component update cycle. I'm still pretty new to React/Redux myself but I hope this helps.

这篇关于使用Axios进行redux-promise，以及如何处理错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！