React Native/Redux中Fetch错误处理的标准化优化方案咨询

Great question—handling error logic consistently across a large app is such a common pain point, and your current approach can definitely be refined to cut down on redundancy and align with standard practices for scalable apps. Here are the most widely adopted, optimized patterns to solve this:

This is the foundational fix for eliminating redundant error handling. Create a centralized apiClient that handles all the boilerplate (status code checks, network error handling, headers) so every action creator can reuse it instead of rewriting the same logic.

Example apiClient.js:

const apiClient = async (url, options = {}) => {
  try {
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      ...options
    });

    // Convert non-2xx responses into errors (instead of letting them slip into "success" logic)
    if (!response.ok) {
      // Fallback if error response isn't JSON
      const errorDetails = await response.json().catch(() => ({ message: response.statusText }));
      const error = new Error(errorDetails.message || `Request failed: ${response.status}`);
      // Add context to the error for later handling
      error.statusCode = response.status;
      throw error;
    }

    return await response.json();
  } catch (error) {
    // Handle network errors specifically
    if (error.message === 'Network Error') {
      const networkError = new Error('Could not connect to the server. Please check your connection or server status.');
      networkError.type = 'NETWORK_ERROR';
      throw networkError;
    }
    // Re-throw other errors so action creators can handle business-specific logic
    throw error;
  }
};

export default apiClient;

Then use it in your login action creator:

import apiClient from './apiClient';

export const handleLogin = data => async (dispatch) => {
  try {
    dispatch({ type: 'LOGIN_REQUEST' });
    const userData = await apiClient('/api/login', {
      method: 'POST',
      body: JSON.stringify(data)
    });
    dispatch({ type: 'LOGIN_SUCCESS', payload: userData });
    // Add login-specific success logic here (e.g., redirect, save token)
  } catch (error) {
    // Only handle login-specific errors here
    let errorMessage = error.message;
    if (error.statusCode === 401) {
      errorMessage = 'Invalid username or password. Please try again.';
    }
    dispatch({ type: 'LOGIN_FAILURE', payload: errorMessage });
  }
};

For larger apps, you can take this a step further with custom Redux middleware to catch errors across all async actions, handling global concerns like logging or showing toast notifications without cluttering individual action creators.

Example errorMiddleware.js:

const errorMiddleware = store => next => action => {
  // Only handle async (thunk) actions
  if (typeof action === 'function') {
    return next(action).catch(error => {
      // Global error handling: log to monitoring tools, show a global toast
      console.error('Global Action Error:', error);
      store.dispatch({ 
        type: 'GLOBAL_ERROR', 
        payload: { message: error.message, type: error.type || 'UNKNOWN_ERROR' }
      });
      // Re-throw so the action creator can still handle specific cases if needed
      throw error;
    });
  }
  return next(action);
};

export default errorMiddleware;

Register it in your Redux store:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import errorMiddleware from './errorMiddleware';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk, errorMiddleware)
);

export default store;

Extend the apiClient to tag errors with consistent types (like AUTH_ERROR, NETWORK_ERROR, VALIDATION_ERROR) so action creators or middleware can react appropriately without parsing status codes or messages every time.

For example, in the apiClient's non-2xx handling:

if (response.status === 401) {
  const authError = new Error('Authentication failed.');
  authError.type = 'AUTH_ERROR';
  authError.statusCode = 401;
  throw authError;
} else if (response.status === 400) {
  const validationError = new Error('Invalid input.');
  validationError.type = 'VALIDATION_ERROR';
  validationError.details = errorDetails;
  throw validationError;
}

Why These Patterns Work Better #

• No more redundant code: All common error logic lives in one place, so updating it (e.g., changing error messages, adding logging) only requires one change instead of editing every action creator.
• Consistent behavior: Every request handles errors the same way, so users get uniform error messages and experiences across the app.
• Clear separation of concerns: The apiClient handles HTTP/network logic, middleware handles global concerns, and action creators focus on business-specific logic.

内容的提问来源于stack exchange，提问作者denden