Day18 HomeScreen を Redux に対応させる

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】|川西発之 / 陳発暉|note ※※※※※本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます.m(_ _ )m1/3 【ウェルカム画面編】:799円 → 199円2/3 【ホームタブ編】:899円 → 299円3/3 【プラスボタン編】:999円 → 399円※※※※※
 note.mu

今日はソースコードを Redux に対応させる作業です。
ひたすらもくもく。ときどきメモ。

Redux全体の流れを確認しておきましょう。

ステップ 1. Action creatorを呼ぶ
ステップ 2. 呼ばれたAction creatorがReducerに情報を渡す
ステップ 3. 渡された情報を使ってReducerがstoreの内容を更新する

この回りくどいやり方が、果たしてどうして必要なのか…

… store, actions, reducers とフォルダとファイルを作成していく。適度に図を入れてくれているし、1.2.3…と番号を降ってくれているのでどういうことをしているのかわかりやすいのだけど、いかんせん頭に入ってこないなー。

どうしてこういう構造にするんかなー。
これはあとで勉強しとかないと、「意味わからんぶぅ」ってなっちゃう。

ここのところはおまじないが多すぎた!魔術師になってしまう!

そして Redux 対応のホーム画面はしっかり動きました!説明が詳しい!

途中で、HomeScreen.js から const GREAT とかも review_action.js に移動してしまってエラーになってしまいました。const GREAT は両方に必要でした。
このあたりはエラーログをきちんと追えたらすぐにわかると思います。

前章まででホーム画面はこれでほぼほぼ完成です。

ホーム画面終わり。
明日は詳細画面です!

コピペのやり方の話

とあるサイトで見つけたソースコードを動かそう!とするとき、ミスってエラーがたくさん出る時があります。

こういうのって切り分けが大事で、切り分けどういう風にするんやー?って思った方は、こうやってやるといいですよ!

【サンプル】JavaScript の場合

JavaScript みたいに独立性の高いプログラムだったら、なにも書いてないまっさらな HTML を用意して、サイトに掲載されているソースコードが「動くかどうか」だけを確認するといいです。

たまに、サイトへの記載ミスがあったり、必要な前提が書いてなかったりします。

その後、本当に組み込みたかった部分にコピーしてみます。

最もやってはいけないパターンは、何も考えずにコピペして、やり始める前の状態がわからなくなり、戻ることも進むこともできず、ゴミだけ(たとえば、2回宣言してしまってる jQuery のライブラリとか)が増えてしまうのは、やらないようにしたいですね。

  • まっさらなところで試してみる。
  • 組み込みたかったソースコードは、戻せるように別名保存するなどしておく。
  • 試してみたソースコードを貼る(サイトに掲載されているものをはるのではなく、さっき試したものを貼るほうがいい)
  • 動くように調整する。まずはエラーを潰す。

目指せコピペマスター!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください