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

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

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

Redux — Not Dead Yet!を要約する

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

• Reduxはどこにも行かないよ。メンテしていくし、役割もあるよ
• Context APIによってReduxを置き換えられるパターンはありえるよ。ただその場合、最初からReduxいらなかった可能性あるよ
• GraphQLがReduxを置き換えることはあるかも。でもReduxのほうがハマるパターンもあるよ
• 最近Dan Abramovさんが非同期レンダリングに関して発表したところ、ソーシャルメディアから「Reduxを置き換えるライブラリを発表した」みたいな広まりをしたけど、ミスリーディングで完全な間違いだよ
• React-Reduxは関心どころがあり、新ContextAPIを利用するようなPRを出したりReactの非同期レンダリングの問題を解決してるところだよ。

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でも言及されてる。僕がざっくり翻訳したやつもリンクしておく