ついんてっく

双子のエンジニア(兄:web、弟:インフラ)が気になること、今やってるプロジェクトとかについて書きます。ぶっちゃけ1人でやって続かなかったから監視体制を置いたのが強いサボりん坊や

React Native ~ Reduxの概念 ~

react-nativeとの出会い

どうも、兄です。

今回はreact-nativeのreduxを記事にしたいと思います。 react-native開発をしてて、ところどころで感じたのが、

なんじゃこれ!?redux超便利!!!

です。笑

ずっとお伝えしたかったのですが、僕の知識不足でうまく説明できずに後回しになっていました。

実装した中での私感を踏まえてお伝えできればと思います。

続きを書きました。

twins-tech.hatenablog.com

Web開発が主なので、MVCまんせー(backboneとかangluerとか)で、デザインパターンなしでプログラム組むとか不慣れ過ぎてヤベー。しかも、androidとswiftのmvc frameworkとか知らねーぜ。2つ覚えんといかんのか、ヤベー。と思っているところに、fluxを知り、それを使っているreact-nativeに出会いました。

fluxと呼ばれるものは、概念を良く聞きかなり興味があった + react.jsの勉強にもなるとうことでreact-nativeを選択したというのがはじめの流れです。

開発を進める上で感じた利点としては、以下があると思います。

  • react.js、react-native共通で使える。
  • iOSAndroid両方同じパターンが使える。
  • 従来のModelを沢山作るのではなく、アプリケーション全体のstate(状態)として管理でデータの所在がわかりやすい。
  • データの流れが一方行で、アプリのスケールがしやすい。

reduxを学ぶ前に元となるfluxを知ろう

reduxを学ぶ前に拡張解釈の元となるfluxと、その歴史を見ていきます。

fluxは偉大なる先人の方々が、めちゃくちゃわかりやすく紹介いただいてるので、引用させて頂きます。

speakerdeck.com fluxって何?ってのを凄く丁寧にわかりやすくまとめてくれてる、且つ面白い超良スライドです。何度読み返しをしたことか。。。

qiita.com react.jsの特徴。魅力。virtualDOMを紹介しながら、なぜパラダイム的なのかを丁寧に解説してくれています。

medium.com facebookの歴史からなぜfluxが生まれたかを説明してくれてます。

要は、1つのviewに1つのModelのような小さいアプリだといいけど、facebookみたいにModel同士が密に絡みあってる場合は動きが予測しづらいよね。デザインパターンを再設計しましょう。原理に立ち帰りましょう。という流れだと認識しています。

その過程で双方向バインディングも排除されています。

これは、Virtual DOMが成せる業だと思っていて、その結果シンプルな考えに立ち帰っていることができるのでしょう。

※ react-nativeはvirtualDOMじゃないという認識なんですが、実行速度には問題ないのはreact-nativeでもComponent同士で比較してるからなのかな?keyが存在するし。。。教えていただけると幸いです。

reduxを学ぶ

実はflux、reduxという概念をすぐに理解できたわけではありませんでした。 今までのMVCをゴリゴリ使って、使う時、Model newして、双方向バインディング便利!ってなってたので。。。

そう思うと、 ( V <-> M ) で、Modelからajaxしてjsonデータを取得してModelに反映するのが最近の実装だったなぁw ちょ、Controllerどこいったwww(遠い目・・・)

flux、reduxはつまるところ、データの流れ一方行に限定させた、アプリケーション全体のstate(状態)管理のパターンという認識で今は落ち着いてます。まだまだ勉強中の身なのでご指摘いただけると助かります。

reduxを学ぶ時は次のドキュメントが公式文書です。全て英語なので辛いところですが、Sampleが豊富なので動かしながら学んでいくことができると思います。

redux.js.org

github.com ※ react.jsとreact-nativeはreduxの繋ぎ方が違うだけで、考え方は同じです。

実装を繰り返したり、ドキュメントを読む過程で脳のスイッチが切り替わったとうことでしょうか。 ですので、次は、react-nativeにreduxの導入の方法をやっていきたいと思います。

それでは!