ご無沙汰しております。こちらは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は良いものなので、積極的に取り込みましょう!

 

★会社紹介★

私達bravesoft(ブレイブソフト)は「最強のものづくり集団」を目指し、
新しいものへの果てしない挑戦を日々繰り広げております!
その中で一緒に働いてくれる仲間も積極採用中ですので、是非お問い合わせください!

<基本情報>
bravesoft オフィシャルホームページ
採用情報
受託開発紹介
UI/UXデザイン紹介

<自社事業>
eventos
Live!アンケート
Appvisor Push

投稿者プロフィール

きんかとう