Reactの新Context APIとRedux is deadはどう関係するのか?

先日、reduxのメンテナであるMark EriksonさんがBlogged Answers: Redux — Not Dead Yet! という記事を書いていて「はーなんだろうなー」と流し読みしていた。

そんな折、React 16.3 がリリースされ、Context APIが刷新されたのを見て、「あ、これは確かに向き合い方ちょっと変わるかも」というのを思ったのでまとめてみる。

Redux — Not Dead Yet!を要約する

元記事をざっくり要約してみるとこんな感じ

GraphQLとかの話も言及されてるけど、今回はContextに絞って話を進めてみる。

Context API

今までのContext APIはどんなもの?

今までReactは親から子への伝播をpropsを介して行い、親->子->孫で親の持つ値を孫に渡すには子をバケツリレー的に経由させなければならず煩雑だった。

これを解決するものとして今までもContextという機能はあった
ただこれは実験的なAPIであり、一般的なアプリケーションには必要なく、状態管理のためには使うべきでない(そういう場合はReduxやMobXを使うべき)ということが書いてあった。

対して、新Context APIは?

今回、新APIは上記の実験的という文脈は取り払われている。

サンプルとして、カラースキームのThemeのようなものを題材として上げられている。(書きながら気づいたが、新しいContex APIの話には特にReduxとかMobXとかの文脈も取り払われているようだ。)

サンプルを拝借してみると、確かにこれは簡素になっているなーと感じる。ちょっと読み解いてみるとこんな具合。

今までであれば <Toolbar theme={theme} user={signedInUser} /> みたいな具合で値を渡したり、Reduxのグローバルな値として持たせなきゃいけなかったのがContextで解決できるようになっているのがわかる。

action的な関数を渡すパターン

ちょっとだけここで疑問になったのが、「functionを渡したり出来るの?」というところだったが、これもカウンターのサンプルで試してみたところ問題無かった。

サンプル ソース

書いてみて思ったが、ContextのConsumer側は同一のコンポーネントである場合とかだと、かなり扱いやすいんじゃないだろうか。
モーダル系とかだとかなり活きるところありそう。

今後Context / Reduxとそれぞれどう向き合っていくか?(主観)

  • Reduxをもう今後使わないか?というと多分普通に使うことはあるだろうと思う
  • 片一方、小規模だけどギリバケツリレーが辛いぐらいな規模のときは、Redux選んでいたのをContextで済ます、みたいなパターンも出てきそう
  • 今までだと、 規模の大きさに準じて、State / Propsのみ -> オレオレFluxとかちっちゃめのやつ -> Reduxって順序で選定していたのが、State / Propsのみ -> Context / State / Props利用 -> Redux -> Redux / Context併用 って順序になっていく感じ?
  • Context APIはネストされたバケツリレーを解決するものの、Stateの分割統治でとかdispatchとかreduxの持っていたバケツリレー以外の機能は、おそらくContextだけだと解決しづらい。
  • ↑めちゃくちゃデカイstateと大量のmutation関数をContextに押し込めて運用するのとか地獄が見えそう
  • ReduxとContextを併用する場合で言うと、「これReduxにいちいち入れるほどじゃないんだけどReduxに入れとかないと色んな所で参照できないから仕方なくReduxにぶっこんどかないといけないんだよなー」みたいなものがContextに切り出せそうな気がする
  • ↑とはいえ、これはこれでReduxのSingle source of truthから外れるので、注意深く切り出す必要はある。
  • このへんの併用の温度感としては、Redux使ってても全体に伝播させる必要が全くないような値についてComponentのLocal Stateを扱ってたのと同じ感じ。
    Local StateについてはReduxのFAQでも言及されてる僕がざっくり翻訳したやつもリンクしておく
Like what you read? Give terrierscript a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.