投稿とユーザの紐付けを実装しよう!

React

今回のゴール

とんぺい
とんぺい

師匠こんばんは。

今日も前回の続きを勉強しに来たブゥ〜!

師匠
師匠

とんぺいくん、こんばんは。

前回_.mapKeys()を用いた、Object-Based Reducerを勉強したね。

今回は、作成したItemとユーザを紐付ける方法を勉強していこう。

とんぺい
とんぺい

了解しました!

作成したItemとユーザを結びつけることで、どのような機能が実装可能になるんだブゥ?

師匠
師匠

Itemとユーザを結びつけることで、上の画像に示してあるように、Itemを作成した本人のみが、Itemの編集と削除ができるようになるよ。

とんぺい
とんぺい

なるほど!

この機能がないと、他人に自分の投稿が消されたり、編集されたりして、色々と不便だブゥ!

師匠
師匠

そうだね。何かユーザが投稿をするようなアプリケーションでは、今回のような機能が必ず必要になるから、今日で基礎を覚えてしまおう。

ディレクトリ構成&パッケージ

とんぺい
とんぺい

今回のディレクトリ構成はどうなるんだブゥ?

師匠
師匠

今回は、特に追加するディレクトリやパッケージはないね。

どのファイルを修正するかだけ事前に確認しとこう。

今回のKey Point

師匠
師匠

では、今回の実装のKey Pointを共有しよう。

今回はItemとユーザを紐付ける機能を実装するので、上の画像に示したロジックを実装していくよ。

とんぺい
とんぺい

了解しました!

特に新しい構文が出てくることはないブゥか?

師匠
師匠

今回は特に新しい構文は取り扱わないよ。

なので、しっかりデータの流れを理解できてれば、簡単に実装できるはずだ。

早速実装に進んでいこう。

実装しよう!

src/components/GoogleAuth.js

師匠
師匠

ここでは、onAuthChange()の中でthis.auth.currentUser.get().getId()を用いることで、ログインと同時にユーザのidをstoreに保存する処理を行うためのAction creatorにuserIdを渡しているよ。

src/actions/index.js

師匠
師匠

ここでは、signIn()と、createItem()を修正しているね。signIn()では、ログイン時に受け取ったuserIdをpayloadとして、reducerに流しているよ。

とんぺい
とんぺい

ほぅほぅ。

そして、createItem()ではgetState()を使って、storeから直接userIdを取得しているんだブゥね!

師匠
師匠

その通り。

そして、取得したuserIdをformで入力された値とともに、データベースに保存しているよ。

src/reducers/authReducer.js

師匠
師匠

ここでは、ログインとログアウト時にstoreのuserIdを更新する、処理を追加したよ。特に難しいことはないので先に進もう。

src/components/items/ItemList

師匠
師匠

ここでは、新たにrenderAdmin()を追加しているよ。

この関数内で、Itemの保持しているuserIdと現在ログインしているユーザのuserIdを比較して、編集ボタンと、削除ボタンの表示・非表示を管理しているね。

とんぺい
とんぺい

ついでに、ログインしていたらItem作成ページに遷移するボタンが表示されるようになっているブゥね!

師匠
師匠

そうだね。今回の実装はここで終了だけど、何か質問はあるかな?

とんぺい
とんぺい

今日は新しい構文も出てこなかったし、データの流れを理解したら、特に難しいところはなかったブゥ!

今日もわかりやすい解説をありがとうございました!

師匠
師匠

それは良かった。

それでは、今日はここまで。

次回は、ユーザのアクションではなく、プログラムで自動的にページ遷移をさせるためのhistory()について勉強していくよ。

コメント

  1. […] 前回は作成したItemと、Item投稿者を結びつける方法を学習したね。今回はhistoryを用いたProgrammatic Navigationを学んでいくよ。 […]

タイトルとURLをコピーしました