💪
expo + redux-toolkit + redux-persistでAsyncStorageにやる気を永続化させるアプリを作った
誰向けの記事?
- react-nativeやexpo使って小さなアプリを作りたいけどバックエンド組むのは面倒くさい人
- redux toolkitってぶっちゃけどうなん？ というのが知りたい人
- expo + redux-toolkit + redux-persist のボイラープレートが欲しい人
- いいからとっとと動くボイラープレートよこせや、っていう人はこちら
- おれはそういう素直な人好きだよ
- いいからとっとと動くボイラープレートよこせや、っていう人はこちら
いきさつ
- 何につけてもやる気が出なかったのでやる気を永続化させようと思った
- やる気がないのでexpoで楽して作りたかった
- やる気がないのでバックエンドは作りたくなかった
- ローカルにデータを保持して完結する簡単なアプリにしたかった
- AsyncStorageの設計とかやりたくなかったのでredux-persistを使った
- やる気がないのでreduxの設計とか考えたくなかった
- redux toolkitを使ってベストプラクティスをそのまま使った
- 一度読んだことを覚えておくやる気もないのでブログにまとめた
結果こんなのができた。
expoだとわかりづらいがreduxのstoreがいい感じに保存されている。
やったこと
- expo初期化 / lintやらprettierやらの設定を適当にする
- redux-toolkitをキャッチアップ/導入
- redux-persistを統合
redux toolkitを触ってみた雑感
reduxを書く上で面倒くさい(あるいは楽しすぎて無駄に時間をかけてしまう)部分をいい感じに抽象化してくれるツール
以下個人の感想です。
ちゃうやろーという意見とか事例とかあったら教えてください🙏🙏🙏
何ができそうだったか
- コードを書く量を無理なく減らせる
- ベストプラクティスやツール選定などを考える時間を踏み倒せる
- immerによる不変化をいい感じに隠してやってくれる
- redux-DevToolsがzeroconfで使える のは個人的に大好き
- toolkit wayみたいなものを感じる
- 作りながらreduxのベストプラクティスを学べる
- reduxを「完全に理解した！」後、「何もわからん。。。」な状態で作業をする上で効果的っぽい
- 逆に最初からこれを使ってreduxを理解しようとするのは辛いかもしれない
- いい意味で自由度が少ない
- action周りの書き方をある程度強制できる
- チームで開発しても書き方がバラけなくて良さそう
RTK query(については今度記事を書きます)
reduxが「状態管理」と「データフェッチとキャッシュ」の二つの責任を持っているものになっていたため、それを分割した「データフェッチとキャッシュ」の部分にフォーカスを当てたツールらしい。
どうもこのRedux toolkitのイチオシらしくreadmeの最新に書いてあるが、ある程度toolkitのAPIを理解した上で読んだ方が理解が早そう。
今回作るアプリでは、やる気はAsync Storageに保存されるため一旦今回は飛ばした。
逆にいうと、こいつを使わなくてもredux-toolkitは使えることがわかった。
redux-persistとの連携
特にはまりどころはなかった。
強いていうなら、persistReducerは引数にreducerを渡してやらなければいけないのでしっかりcombineReducersをする必要があるところくらいか。 実装例
toolkitは引数に渡されたreducerを見て、ただのobjectが来ていたらよしなにcombineReducerをかけてくれている様子。かしこい。
redux-toolkit/configureStore
やる気は永続化できた？
どうやら保存できたようだが、アプリから人間へのダウンロードは対応していないみたいだった。
おしまい。
Discussion