【React】サーバーと画面表示時でデータ形式が異なる際のベストな変換タイミング

#実現したいこと
ReactとFirestoreを使って、IoTデバイスの現在地情報や稼働状況を表示するアプリを開発しています。
その際、Firestore上のデータと、Reactコンポーネント上で表示するデータの形式が異なることがあり、
どのタイミングで変換を行うべきか決めあぐねております。

###例
サーバー：デバイスのエラーコード(intもしくはnumber)
ブラウザ画面：エラーメッセージを文字列で表示

この際、①Firestoreからデータを取得してStateへ格納するタイミングか②State→当該コンポーネントへ情報を表示するタイミングのどちらでnumber→stringへの変換を行うべきなのか判断できません。

#現在のコード
現状は②で実装しており、下記のようなコードになっています。

Typescript
1// 親コンポーネントでerrorCodeをStateから参照しており、下記コンポーネントにPropsで渡しています
2const InfoCard: React.FC<Props> = (props) => {
3   const errorMessage: (string | undefined) = setErrorMessage(props.errorCode);
4
5   return(
6    <>
7     ...
8     <p>{errorMessage}</p>
9     ...
10    </>
11   );
12}
13
14
15const setErrorMessage = (errorCode: number) => {
16    switch (errorCode) {
17        case 0:
18            return undefined;
19        case 1:
20            return 'message 1';
21        case 2:
22            return 'message 2';
23        case 3:
24            return 'message 3';
25        default:
26            return 'some unspecified error';
27    }
28}

エラーメッセージは複数のコンポーネントで表示することを考えているので、①のタイミングで最初から文字列でStateに入れた方が良いのかもしれないとも思うのですが、それだとReducerの処理が煩雑になり好ましくないのかなとも懸念しています。

素人質問で恐縮ですが、考え方や参考情報のキーワードなどでもご提示いただけますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

必ずしもこれが正しいという自信があるわけではないですが、私の意見を述べさせていただきます。

エラーメッセージは複数のコンポーネントで表示することを考えているので、

とのことなので、基本的には Redux の State 側で文字列となっていることが好ましいと思います。

私が React + Redux でプログラムを書く際はコンポーネントには処理を全く記載しないようにしています。
その際、tacro さんの考えと同様で、Reducer での処理をしたくないという気持ちもあるため、間にカスタムフックを噛ませてそちらでビューモデルのような物を生成し、MVVM のような形で実装しています。

react-redux のパッケージの中には useSelector というフックが存在し、これによって State からの取得ができます。
これらと他のフックをまとめて処理をし、カスタムフックとして作成してビューモデルを返しています。
私自身以下の記事を参考にしましたので、紹介します。
カスタムフックとreact-reduxのHooks APIでビジネスロジックとビューを完全分離する

投稿2020/06/26 00:05