Reactアプリにおける非同期通信エラー処理の実装案

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  response: null,
};

const slice = createSlice({
  name: "error",
  initialState,
  reducers: {
    setError: (state, { payload }) => {
      return { response: payload };
    },
  },
});

export default slice.reducer;

export const { setError } = slice.actions;

import { useDispatch } from "react-redux";
import { setError } from "../store/error";

function MyComponent() {
  const dispatch = useDispatch();

  const handleSubmit = async () => {
    try {
      const response = await someAsyncFunc();
      // ...
    } catch (err) {
      dispatch(setError(err));
    }
  };

  // ...
}

import { useDispatch } from "react-redux";
import { setError } from "../store/error";

function useFetchUsers() {
  const dispatch = useDispatch();
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetch = async () => {
      try {
        const response = await fetchUsers();
        setUsers(response);
      } catch (err) {
        dispatch(setError(err));
      }
    };
    fetch();
  }, []);

  return users;
}

import { createSlice } from "@reduxjs/toolkit";
import { setError } from "./error";

const slice = createSlice({/* ... */});

export default slice.reducer;

export function fetchSomething() {
  return async function(dispatch) {
    try {
      const response = someAsyncFunc();
      // ...
    } catch (err) {
      // エラー用のストアからインポートしたアクションを呼ぶ
      dispatch(setError(err));
    }
  };
}

import React from "react";
import { useSelector } from "react-redux";
import NotFound from "../components/NotFound";

function Page({ children }) {
  const error = useSelector(state => state.error.response);

  // エラー処理の例
  if (error) {
    switch (error.status) {
      case 404:
        return <NotFound />;
      default:
        break;
    }
  }

  // エラーがなければコンテンツを表示
  return children;
}

export default Page;

function Home() {
  return (
    <Page>
      {/* コンテンツ */}
    </Page>
  );
}

import React from "react";
import { Route } from "react-router-dom";
import { useDispatch } from "react-redux";
import { setError } from "../store/error";

export default function MyRoute(props) {
  // ルートが変わるタイミングでエラーをクリアする
  const dispatch = useDispatch();
  dispatch(setError(null));

  return <Route {...props} />;
}

<Switch>
  <MyRoute path="/" exact children={<Home />} />
  <MyRoute path="/about" children={<About />} />
</Switch>

const invalidMessages = useSelector(state => {
  // バリデーションエラーはレスポンスコード 400 番と仮定する
  if (state.error.response.status !== 400) {
    return [];
  }

  // エラーレスポンスのオブジェクトの形式はアプリケーション次第
  return state.error.response.data.messages;
});

import axios from "axios";
import store from "./store";
import { setError } from "./store/error";

// Axios インスタンス
const client = axios.create();

// 成功の場合は何もしない
const onSuccess = response => response;

// エラーの場合はストアにエラーをセットする
const onError = err => {
  // 関数や Promise オブジェクトなど、JSON にシリアライズできない値を
  // アクションのペイロード（引数）に含めるとエラーになるため、
  // 必要なキーのみ取り出してアクションに渡す
  const { status, data } = err.response;
  // コンポーネントの外でアクションを呼び出したい場合は、
  // store の dispatch メソッドを利用する
  store.dispatch(setError({ status, data }));
  // エラーをスローしたい場合は...
  // Promise.reject(err);
};

client.interceptors.response.use(onSuccess, onError);

export default client;

// 独自 Hook
function useFetchUsers() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetch = async () => {
      try {
        /* ... */
      } catch (err) {
        setError(err);
      }
    };
    fetch();
  }, []);

  // 配列にエラーをまとめて返す
  return [users, error];
}

function MyComponent() {
  // 独自 Hook からエラーを受け取る
  const [users, fetchError] = useFetchUsers();

  // ...
}

const [handlerError, setHandlerError] = useState(null);

const handleSubmit = async () => {
  try {
    /* ... */
  } catch (err) {
    setHandlerError(err);
  }
};

const handleClick = async () => {
  try {
    /* ... */
  } catch (err) {
    setHandlerError(err);
  }
};

const [foo, fooError] = useFetchFoo();
const [bar, barError] = useFetchBar();

const [handlerError, setHandlerError] = useState(null);
const handleSubmit = async () => {
  try {/* ... */} catch (err) {
    setHandlerError(err);
  }
};

// -> ページ内にいくつもエラーがある

// エラーをまとめる独自 Hook
function useErrors(...errors) {
  const [error, setError] = useState(null);

  useEffect(() => {
    for (let i = 0; i < errors.length; i++) {
      if (errors[i]) {
        setError(errors[i]);
        break;
      }
    }
  }, errors);

  return error;
}

const pageError = useErrors(fetchError, handlerError);

const pageError = useErrors(fooError, barError, bazError);

return (
  <Page error={pageError}>
    {/* コンテンツ */}
  </Page>
);