在 react redux 中处理 fetch 错误的最佳方法是什么？

Question

我有一个用于客户端的减速器，另一个用于 AppToolbar 和其他一些...

现在假设我创建了一个 fetch 操作来删除客户端，如果它失败了，我在 Clients reducer 中有代码应该做一些事情，但我还想在 AppToolbar 中显示一些全局错误。

但客户端和 AppToolbar 减速器不共享相同的状态部分，我无法在减速器中创建新操作。

那么我应该如何显示全局错误？谢谢

更新 1：

我忘了提到我使用estedevstack

更新 2： 我将 Eric 的答案标记为正确，但我不得不说我在 este 中使用的解决方案更像是 Eric 和 Dan 的答案的组合...... 你只需要在你的代码中找到最适合你的...

Answer 1

如果你想有“全局错误”的概念，可以创建一个errorsreducer，它可以监听addError、removeError等...动作。然后，您可以在 state.errors 连接到您的 Redux 状态树，并在适当的地方显示它们。

有很多方法可以解决这个问题，但总体思路是全局错误/消息将值得他们自己的 reducer 与<Clients />/<AppToolbar /> 完全分开。当然，如果这些组件中的任何一个需要访问errors，您可以在需要的地方将errors 作为道具传递给它们。

更新：代码示例

如果您将“全局错误”errors 传递到顶级<App /> 并有条件地渲染它（如果存在错误），下面是一个示例。使用react-redux's connect 将您的<App /> 组件连接到一些数据。

// App.js
// Display "global errors" when they are present
function App({errors}) {
  return (
    <div>
      {errors && 
        <UserErrors errors={errors} />
      }
      <AppToolbar />
      <Clients />
    </div>
  )
}

// Hook up App to be a container (react-redux)
export default connect(
  state => ({
    errors: state.errors,
  })
)(App);

对于动作创建者而言，它会根据响应分派（redux-thunk）成功失败

export function fetchSomeResources() {
  return dispatch => {
    // Async action is starting...
    dispatch({type: FETCH_RESOURCES});

    someHttpClient.get('/resources')

      // Async action succeeded...
      .then(res => {
        dispatch({type: FETCH_RESOURCES_SUCCESS, data: res.body});
      })

      // Async action failed...
      .catch(err => {
        // Dispatch specific "some resources failed" if needed...
        dispatch({type: FETCH_RESOURCES_FAIL});

        // Dispatch the generic "global errors" action
        // This is what makes its way into state.errors
        dispatch({type: ADD_ERROR, error: err});
      });
  };
}

虽然您的 reducer 可以简单地管理一系列错误，但可以适当地添加/删除条目。

function errors(state = [], action) {
  switch (action.type) {

    case ADD_ERROR:
      return state.concat([action.error]);

    case REMOVE_ERROR:
      return state.filter((error, i) => i !== action.index);

    default:
      return state;
  }
}

Answer 2

Erik’s answer 是正确的，但我想补充一点，您不必触发单独的操作来添加错误。另一种方法是使用一个reducer 来处理任何带有error 字段的操作。这是个人选择和惯例的问题。

例如，来自具有错误处理的Redux real-world example：

// Updates error message to notify about the failed fetches.
function errorMessage(state = null, action) {
  const { type, error } = action

  if (type === ActionTypes.RESET_ERROR_MESSAGE) {
    return null
  } else if (error) {
    return error
  }

  return state
}

Answer 3

我目前针对一些特定错误（用户输入验证）采取的方法是让我的子减速器抛出异常，在我的根减速器中捕获它，并将其附加到操作对象。然后我有一个 redux-saga，它检查动作对象是否有错误，并在这种情况下用错误数据更新状态树。

所以：

function rootReducer(state, action) {
  try {
    // sub-reducer(s)
    state = someOtherReducer(state,action);
  } catch (e) {
    action.error = e;
  }
  return state;
}

// and then in the saga, registered to take every action:
function *errorHandler(action) {
  if (action.error) {
     yield put(errorActionCreator(error));
  }
}

然后按照 Erik 的描述将错误添加到状态树。

我非常谨慎地使用它，但它使我不必复制合法属于 reducer 的逻辑（因此它可以保护自己免受无效状态的影响）。

Answer 4

编写自定义中间件来处理所有与 api 相关的错误。在这种情况下，您的代码会更干净。

   failure/ error actin type ACTION_ERROR

   export default  (state) => (next) => (action) => {

      if(ACTION_ERROR.contains('_ERROR')){

       // fire error action
        store.dispatch(serviceError());

       }
}

Answer 5

我所做的是将所有错误处理集中在每个效果的基础上

/**
 * central error handling
 */
@Effect({dispatch: false})
httpErrors$: Observable<any> = this.actions$
    .ofType(
        EHitCountsActions.HitCountsError
    ).map(payload => payload)
    .switchMap(error => {
        return of(confirm(`There was an error accessing the server: ${error}`));
    });

Answer 6

您可以使用 axios HTTP 客户端。它已经实现了拦截器功能。您可以在 then 或 catch 处理请求或响应之前拦截它们。

https://github.com/mzabriskie/axios#interceptors

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });