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

javascript reactjs redux

2022-08-30 05:21:33

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

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

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

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

更新 1：

我忘了提到我使用este devstack

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

答案 1

如果你想有“全局错误”的概念，你可以创建一个化简器，它可以监听addError，removeError等...行动。然后，您可以挂接到 Redux 状态树，并在适当的时候显示它们。errorsstate.errors

有很多方法可以解决这个问题，但一般的想法是，全局错误/消息值得它们自己的归纳器与 /完全分开。当然，如果这些组件中的任何一个需要访问，您可以在需要时作为道具传递给它们。<Clients /><AppToolbar />errorserrors

更新：代码示例

下面是一个示例，说明如果您要将“全局错误”传递到顶级并有条件地呈现它（如果存在错误），它可能会是什么样子。使用 react-redux 的 connect 将组件连接到某些数据。errors<App /><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});
      });
  };
}

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

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;
  }
}

答案 2

Erik的答案是正确的，但我想补充一点，您不必为添加错误而触发单独的操作。另一种方法是使用化简器来处理具有错误字段的任何操作。这是个人选择和惯例的问题。

例如，从具有错误处理的 Redux 实际示例中：

// 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
}