ログインフォーム(認証機能)で覚えるReact NativeのReact Reduxの使い方

React Nativeの環境構築や基本的なコンポーネントの使い方がわからない人は、上記記事を先に参照してください。

まずは、React Nativeのプロジェクトを作成して、

プロジェクトディレクトリの中で、reduxを使うために必要なモジュールをインポートして下さい。

「react-redux」はReactとReduxをバインドするために必要なモジュールですので、「redux」と「react-redux」の両方をインストールする必要があります。

redux-thunk」はReduxで非同期通信するために必要なライブラリですので、一緒にいれておきます。

また、認証機能にGoogleが買収したBaasサービスFirebaseを使いますので、

でfirebaseモジュールもインポートしておいてください。(Firebaseの基本的な使い方がわからない人は、コチラの記事を参照)

React Reduxとは

「そもそもReact Reduxとはなんなのか?」という疑問があるかと思いますが、ようは、ReactやReact Nativeで使用する「store」を管理しやすくする便利ツールです。

React Reduxを使わなくても、全く同じプロダクトをReact・React Nativeだけで作れます。しかし、Component間でデータを延々とバケツリレーのように受け渡しして、カオスな状態のプロダクトが出来てしまうでしょう。

React Reduxはそういったカオスなデータ管理にならないように、中央集権型のデータStoreの役割を担ってくれるライブラリです。

React Reduxで認証フォームを作る

それでは、早速作っていきましょう。今回の目的は「React Redux」を覚えるということなので、最小のファイル構成でいきます。

この4つのファイル構成でreact reduxでログインフォームが作れます。

  • App.js:大元の親コンポーネント
  • LoginForm.js: ログインフォームを構築する子コンポーネント(View)
  • actions.js: Viewで操作した動作を受け取って、reducersに指示を出す(Actions)
  • reducers.js: Actionから受けた指示通りに全体で保有しているデータStoreを更新する(Reducer)

App.js(middlewareやreduxをreactに結合する)

まずは大元になるApp.jsをみていきましょう。

基本的にApp.jsはReact Reduxでデータを管理するために必要なもの(reducerやmiddleware等)を結合する場所です。

こういったrender()内の記述は、react reduxを使うときはお決まりで書くものとして、理解するというよりは覚えてしまいましょう。

今回App.jsで行っていることは

  • 1〜6行目:React Reduxを非同期通信(ログイン処理など)で使用するために必要なモジュールをインポート
  • 7〜8行目:reducersと子Componentをインポート
  • 11〜19行目:firebaseを使えるようにする(firebaseでのログイン認証についてわからない人はコチラの記事を参照)
  • 22〜28行目:お決まりの記述として覚えましょう。(ヘッダーとLoginFormを記述している部分以外はReact Reduxを使うおまじない的記述です)

LoginForm.js(View画面)

次は、ログインフォームを描写しているView画面にあたるLoginForm.jsを解説します。

少し長めですが、行っている処理は非常にシンプルなので、1つずつ説明していきます。

  • 1〜4行目:必要なモジュール達をインポート
  • 5行目:actions.js(Action)から、使いたいメソッドをインポート
  • 8〜10行目:ログインボタンを押したときにActionにemailとpasswordを渡して、Action側で定義されたsubmitLogin()を実行する(ログイン認証機能)
  • 13〜24行目:firebaseと通信中はStoreのauth.loadingがtrueになって、ローディングアイコンが出現する
  • 27〜58行目:render()処理(emailやpasswordの値が変更される度にActionを呼び出して、storeのemailやpasswordの値が更新されるようになっている【onChangeText={email => this.props.changeEmail(email)}】)
  • 93〜99行目:storeの呼び出し処理。ここで後ほど紹介するReducerで保持しているStoreの値を取得する。取得した値は、this.props.○○という呼び出し方で、React Component内で使用できる
  • 102行目:connectでActionとReducerをこのコンポーネントに結合している。(こういうものだと思って覚えてしまいましょう)

actions.js(Action)

次は、Viewからの命令を受けとり、Reducerに値を受け渡すActionをみていきましょう。

基本的には、typeでReducerのどの処理を行うか指示して、payloadに渡したい値を代入します。

17〜31行目の処理はちょっとだけ特殊で、ログイン処理を行うためにはfirebaseに正しい認証情報かどうかを問い合わせる必要があります。そのfirebaseに問い合わせているタイムラグをうまく処理しています。(非同期処理)

Actionの役割は、Viewから指示が来たら、必要な処理を行って、処理後のデータをReducerに渡すことです。

reducers.js(Reducer)

最後に、値を受け取って、中央集権的にデータStoreを管理しているReducerを解説します。

  • 3〜8行目:初期値
  • 10〜27行目:どういった指示(type)がきたら、どの値を更新するかをここに記述します。switch文で現状のstateを上書きしていくこの書き方が一般的ですので、基本的にはこの型にそってReducerを書いていくことをオススメします。
  • 29〜31行目: データstoreに当たる部分。ここにあるデータを更新し、View側から取得してアプリを作っていきます。

Reducerの役割はシンプルで、Actionから命令と値が飛んできたら、それに従ってデータStoreを更新するだけです。

一方通行のシンプルなデータの流れ

以上でReact Reduxで作るログインフォームは完成です。うまくいっていたら、

こういった画面が表示されると思います。

そして、接続しているFirebaseに登録されているUserでログインすると

【ログイン中】という文字が出現するようにしてあります笑

ちょっと、Reduxに慣れていない人にとっては複雑に感じるかもしれませんが、

  1. View側のデータを更新するために、Actionに命令を出す
  2. Viewの指示を受け、Actionでデータを生成して、Reducerに渡す
  3. ReducerはActionから来た指示通りにデータStoreの値を更新する
  4. ViewはReducerで更新された値を受け取り、再描写する

という流れで、データが一方通行にグルグル回っているだけです。

今回作成したアプリは、非常にシンプルにReact Reduxを利用して作ったネイティブアプリですので、このアプリでReact Reduxのデータ構造を覚えてしまってください。

現在のweb界隈のReact Nativeによるアプリ開発では、React Reduxは必須スキルになっていますので、頑張って覚えてくださいね!

 

今回作成したアプリを以下にアップしておきましたので、参考にしたい方は是非^^

https://github.com/rara-tan/react-native-auth-redux-flow

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。