ReactNaticeとReduxでGithub検索アプリを作った

前のToDoアプリ制作に引き続き、ReactNativeの練習がてらGithub検索アプリを作りました。
早急に必要そうなものを突っ込んだので、統一感どこ行ったという感じになりましたが一応できました。

コードはGithubで公開しています。

【参考】mrsekut/react-native-base-templates at searchRepositoryApp

アプリの概要

もともとは、Githubの検索機能一つだったのですが、急遽練習したいものがいくつか出てきたので、無理やりページを作って機能を付け足しました。

ですので、統一感とか利便性とかは皆無です。

GitHubリポジトリ検索ページ

  • GitHubのAPIを利用してリポジトリの検索をする
  • PullRefreshができる
  • 無限スクロールになっている
  • 一度ホームに戻り、復帰したときにそれを検知して再検索する

郵便番号検索ページ

  • 郵便番号を入れると住所を出してくれる
  • 非同期処理の実装を練習するために無理やり作った 

カウンター

  • ただのカウンター
  • recomposeの練習のために無理やり作った 

これを作るにあたって導入、勉強したもの

今回新しく追加したものです。 TypeScriptなど、前回使ったものは除いてあります。

 

  • ReactNativeのAPI
    •  FlatList
    • ActivityIndicator
    • AppState
  • Redux
  • Ducks
  • HoC
  • recompose
  • redux-saga
  • Ramda.js
  • react-native-debugger
  • react-native-navigation

簡単に一つずつ見ていきます。

ReactNativeのAPI

本家のReactNativeが提供しているAPIをいくつか使いました。

 

  • FlatList
    • 無限スクロールやプルリフレッシュなどを簡単に実装できる多機能なリストコンポーネントです。
  • ActivityIndicator
    • Loading…的なやつを表示するやつ。
  • AppState
    • バックエンドからの復帰などを検知して何かしらのアクションを実行できるやつ

Redux

Reactのstateをわかりやすく管理するデータフローのためのフレームワーク

Ducks

Reduxを採用するときのディレクトリ構成のデザインパターンです。
ファイルがすっきりし、密結合なものどうしが同じファイル内にくるので開発もしやすいです。

【参考】ReactNativeとTypeScriptでDucksデザインパターンを試してみた | mrsekutの備忘録

HoC関連

    Higher-order Componentという、コンポーネントを引数に取るようなコンポーネントを使ったりして開発していきます。

redux-saga

reduxを用いながら、非同期処理を実装するためのライブラリです

【参考】きじせいさくちゅうです

Ramda.js

JavaScript用の関数型プログラミングライブラリです。

【参考】きじせいさくちゅうです

react-native-debugger

Redux開発でのstateの中身や遷移状況を一目でわかるようにする、超便利なライブラリです。

react-native-navigation

ReactNative上でページ遷移を実現するためのライブラリです。
初期設定がちょっと大変。

注意

現状、めっちゃTypeScriptのエラー出ています。
あと、もしかするとstorybook起動しないかも。 
Androidに関してはちゃんとみてないので、たぶん動きません。

今後

今後はテストに重きをおいたり、まだ使っていない外部ライブラリを使っていきたいです。