Reactにおけるグローバルストアの変更を伴うイベントハンドラの定義場所について

Question

TypeScript + Reactで初めてSPAを作成しています。
使用ライブラリは下記の通りです。

• ルーティング:React Router
• ステート管理:Recoil

質問したいのは、グローバルストアの変更を伴うイベントハンドラをどのように定義するのがよいか、ということです。

作成中のアプリは、DB検索機能と一覧表示機能を持っており、下図のページ、コンポーネント構造を持ちます。

ページ/home および /listは同じ子コンポーネントSearchBoxを持っています。
SearchBoxでイベントが発生した場合、親がどのページであっても同一の処理を行いたいため、各ページのルートAppでイベントハンドラを定義し、Propsとして各ページ経由でハンドラをSearchBoxへ渡しています。
ルートであるAppに定義したのは、次の理由からです

• 同じ処理を行う関数を何度も定義したくない
• SearchBoxを処理に依存させたくないためここにはハンドラを定義したくない

しかし、この設計では次の問題があります。

• Appの肥大化
• 子コンポーネントにいちいちハンドラ用のPropsを定義して受け渡す必要があり面倒

このような問題を解決するために、良い手段はありますか？
私自身としては、ハンドラを別ファイルに定義し各コンポーネントから参照する方法を考えましたが、Reactコンポーネント外からグローバルストアにアクセスすることに問題はないのか…など懸念があります。

このあたりのベストプラクティスは検索してもなかなか見つけることができず、ご存じの方、あるいは参考書籍等ございましたらご教示いただければありがたく思います。

Comments

[maisumakun]

Contextなどは考えてみましたか？

[FKM]

上の方と同様、useContextが使えるのではないかと思います。

[obsult]

恥ずかしながら、Contextに関数を登録して参照する、という発想がありませんでした。
useContextを使うことで解決いたしました。
アドバイスをいただきありがとうございました。

Answer 1

注記欄にてuseContextに関数を登録するという手法を教えていただきました。
おかけでイベントハンドラを別ファイルに切り出すことができ、課題であったルートコンポーネントの肥大化とイベントハンドラのバケツリレーを解決することができました。
コメントをくださったmaisumakunさん、FKMさんありがとうございます。

また、ハンドラを複数のContextに切り分けた際、Providerを多重にラップする必要がないよう、下記のリンク先の手法が利用できることもわかりました。
Context Provider をまとめる - Qiita