ReactNativeとReduxの勉強のアウトプットとして多機能なTodoリストを作成しました。
ReactNativeとReduxの組み合わせの資料は意外に少なく、うまく動作しないものが多かった印象です。そのため、ReactとReduxの少し古めの記事をReactNativeに置き換えてなんとか頑張ってみました。
そもそもJavaScriptなどの基礎知識が曖昧だったということもあってクオリティは低いかと思います。
制作期間はReactNativeに触れてからちょうど1週間です。（Reactを少しだけ勉強してたくらいです）
ソースコードはこちらになります。
https://github.com/s-amano/react-native-todo-list
要件、機能、使用した技術など
-
TODOのデータ型
-
id // 識別するための番号
-
completed // チェックしているかどうか
-
title // TODOのタイトル
-
description // TODOの詳細
-
createdAt // 作成日時
-
使用した技術
-
ReactNative
-
Redux
-
要件
-
追加ができる
-
編集ができる
-
削除ができる
-
作成日時のソート(昇順・降順)ができる
-
リアルタイム検索ができる
-
Doneチェックがつけられる（toggle機能）
-
Doneのチェックがついたもののみ表示できる
-
React Navigationを使った画面遷移
-
データの永続化
実際に作ったアプリ
操作や機能の補足としては、
ナビゲーションの勉強のためtodoの追加は別ページにしており、
Todoの詳細ページ→編集ページの遷移ができます。
また、検索は1文字ごとに検索してくれます。
詰まった部分、大変だった部分
正直なんども詰まりました。web上に情報があんまなかったので（削除機能でさえなかった）、逆に自分の頭の中で実装方法を考えて手を動かしてトライアンドエラーを繰り返すといういい経験になりました。
その中でも概念的に詰まった部分、エラーで詰まった部分をまとめてみたいと思います。
-
謎すぎるバグ→正体これでした→https://qiita.com/tenshinhan_yamucha/items/6923c78fb53024c71a8b
-
stateとはViewに表示されているデータやUIの状態などのアプリケーションが保持している情報のこと
→ソートの条件や実際のtodoなど -
全体のデータフローとしては、ActionをStoreへdispatch（送信）すると、Storeのstateが変更されるという感じ
-
Actionはアクション（何が起きたのか）とそれに付随する情報を持つオブジェクト
-
store内ではactionをreducerが受け取りstoreに対して新たなstateオブジェクトを作成
また、
- Reducerに働いてもらうためには、ActionをStoreにDispatchする。
- Stateを取得するには、StoreからgetStateする。
- React側でReduxを使ったり、stateの情報を取ってくるのには、上記2つが必要で、それをcomponent側（reactのview側）で意識せずに使いたいので、containerで、以下を定義し、reactとreduxをconnectする
- mapStateToPropsは、Store.getState()のような役割をして、ComponentのpropsにStateの中身を詰め込んでくれる
- mapDispatchToPropsは、ActionCreatorをラップした、actionをStoreにDispatchしてくれる関数をpropsに詰め込んでくれる
- 上記をcontainerで定義すれば、componentでpropsとして受け取り描画したり、関数を直接使えるのでリファクタリングしやすいし可読性が高まる
アプリの課題、追加でやりたいこと
上記で一応アプリの紹介は終わりですが、「もしこの先も勉強のためにこのアプリの作成を続けるとしたらなにをするのか＝このアプリの課題」について箇条書きで述べたいと思います。
- テスト導入
- Typescriptで書いてみたい
- redux-thunkなどによる非同期処理→前に作ったDjangoのAPIを使ってもいいかも
- フォームにバリデーションをつけたい→propTypesというものでできそう。