スマホ研究部 byブレイブソフト

ヒットノウハウから最新技術まで、スマホの全てを明らかにする部活!

株式会社ブレイブソフト

ReactNative(その2)NavigatorとRedux

  • このエントリーをはてなブックマークに追加

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

 

★部員募集中★

ブレイブソフトは現在エンジニアを募集中です。ご応募お待ちしてます!

投稿者プロフィール

きんかとう
  • このエントリーをはてなブックマークに追加
カテゴリー:JavaScript