React-Reduxエラーページ管理

Question

私たちは、エラー伝播とエラーページ表示の仕組みをセットアップしようとしているreact-reduxプロジェクトを持っています。

私たちがこれまで行ってきたことは、非同期APIコールや他の場所でエラーが発生した場合、アクションを実行してルートレベルコンポーネントAppを変更することです。ルートレベルレデューサーでは、エラーが伝搬された状態でエラーフィールドを設定します。エラーが発生した場合は、私たちが持っているコンテンツではなくエラーページをレンダリングします。

フローは次のようになります。コンポーネントA - >アクション - >アプリケーションリデューサ - >アプリケーションコンポーネント - レンダリングエラーページ。

しかし、問題はエラーコンポーネントに残っているということです。そして、エラーフィールドがエラーページをレンダリングする状態にとどまるので、ユーザーが新しいアクションをトリガーするたびに、またはエラーページが表示されるたびに、状態のエラーフィールドを{}にリセットするメカニズムが基本的に必要です。

この問題を解決する良い方法が見つかりませんでした。誰もが前に直面していたかもしれない非常に一般的なもののように見えます。一般的に、非同期エラーの伝播をどのように処理し、それに応じてエラーページを表示できますか？

Answer 1

この問題に対する正しい解決策を使用することであった。

componentWillUnmount() { 
    this.props.handleErrorReset(); 
} 

handleErrorReset機能は、基本的にエラー状態にエラー値のリセットをトリガーするアクションを発生させ、これに沿って何か：

const clearErrorState = (state) => state.set('error', fromJS({})); 

componentWillUnmountは、基本的に関連コンポーネントがアンマウントされた直後に実行されるため、不要な状態の値のリセットやクリーニングには最適です。

https://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount

Answer 2

react-routerのようなルーティングシステムを使用している場合、減速機からのエラーを表示するエラーページを実装することができます。