ご無沙汰しております。こちらはjavascriptに拘っているエンジニア、とうでございます。

前回のその一と大部時間を経ってしまい、RNのバージョンも6個増えて、執筆時点は0.53RCとなります。プロジェクト自体は割りと平穏なペースで地味に進化していますが、コミュニティの方で揺るがすthird-partyが一個あります。今日はそれを切り口として、色々お話したいと思います。

・Navigatorの経緯

びっくりするだろうが、RNでは公式のnavigatorは存在しません。古いバージョンで一応<navigator>という

コンポーネントが提供されていたですが、全然使えものにならないため、

react-native-navigationとreact-navigation（ちょっとややこしい）が生まれるわけです。

・Navigatorの弱み

この二つ、書き方（文法的に）の差が激しいですが、コンセプトは一緒です。下記のようにアプリ状態（state）を管理する。

※小文字は画面（screen）に指する、大文字はnavigatorに指しています。bとCはAの子であり、親からprops貰うことしかできません。

シンプルなアプリでは、それは結構ですが、しかもいと簡単に作れますが、次のニーズが来たら、手を挙げるほどではないけれど、ソースコードはややこしくなります。

ニーズ：bで行った操作がdにすぐ反映させる。

もうちょっと言うとある詳細画面に入って「いいね」したら、別のタブに切り替えて、マイページでいいねしたものが反映されている

一見ありがちな仕様ですが、普通のnavigatorだけを使うであればなかなかできません。なぜなら、状態はバラバラで管理しているわけです。

・どうすれば

勿論ナビゲーターを作ってくれた強いcontributorsは意識していたため、そこでReduxの出番となります。

Reduxは何かを簡単に説明すると、別々で管理されているstateをあるところ（store）で統一するミドルウェアとなります。

また雑すぎな手書きを御覧ください。

ご覧の通りに、一種目の違ってコンポーネント（画面）の間は直接にデータ交換とか行わいです。その代わり、reduxを経由し、データとか状態管理を行います。

もうちょっと説明したいので、ネットからいい例を探して来ました！

Reducer：pure function　インポートはアクションでアウトプットは更新された状態（state）

Action：ユーザーの操作

Store：状態の集合体

上記を理解すれば、reduxルールは多少纏めれるでしょう

・ビュー側は状態を表示する

・状態はユーザーの操作しか変えれない

・同じactionは同じ結果を起こす

Reduxを導入すると利点（拡張性が高い、結合度が低いとか）は複数ありますがReduxを導入すると時間掛かるし、アプリはぐっと複雑になってくることを意識して欲しいです。けれど、一エンジニアの視点から言わせてもらうと、Reduxは良いものなので、積極的に取り込みましょう！

 

Follow me!