投稿内容の編集機能を実装する!

React

今回のゴール

Image from Gyazo
とんぺい
とんぺい

師匠こんにちは〜。

今日も、CRUDアプリケーションの続きを学びに来たブゥ!

師匠
師匠

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

前回は、historyを用いたProgrammatic Navigationを学んだね。

今回は、投稿したItemを編集する機能を実装しよう。

とんぺい
とんぺい

承知しました!

ところで、今回はどのようなディレクトリ構成になるんだブゥ?

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

師匠
師匠

今回のディレクトリ構成は以上のようになるよ。

特に新しいパッケージは追加しないので、どのファイルを修正するのかを事前に確認しておこう。

とんぺい
とんぺい

了解しました〜

どこのファイルを修正するか確認できたブゥ!

今回のKey Point

師匠
師匠

リソースの更新を行うHTTPメソッドとして、PUTメソッドPATCHメソッドの2つが存在しているね。これらは似ているようで、使い方によってはアプリケーションのバグの原因にもなるので、違いをしっかり理解しておこう。

とんぺい
とんぺい

今までは、リソースの更新はPUTメソッドしか使ってなかったけど、PATCHメソッドというのもあるんだブゥね!

それぞれ何が違うんだブゥ?

師匠
師匠

まずは、PUTメソッドから説明しよう。

PUTメソッドは、更新というより、既存のリソースを丸ごと置換するメソッドだよ。今回は、ItemのTitleとDescriptionのみを渡すため、PUTメソッドを用いてリソースを更新しようとすると、Itemに紐付けられたuserIdがなくなってしまうんだ。

とんぺい
とんぺい

それは大変だブゥ!

Itemに紐付けられたUserIdがなくなったら、誰もそのItemの編集と削除ができなくなってしまうブゥ!

師匠
師匠

一方で、PATCHメソッドは渡されたデータを元に、既存リソースの1部の更新を行うよ。

以下に、PUTメソッドとPATCHメソッドの違いを簡単に示そう。

とんぺい
とんぺい

既存リソースを丸ごと置換したい場合には、PUTメソッドを使う。

既存リソースの1部分を更新したい場合は、PATCHメソッドを使う。

うん!違いがわかったブゥ!

師匠
師匠

よし。それでは、今回のKey pointを理解できたところで、編集機能の実装に移っていこう。

実装しよう!

src/components/App.js

師匠
師匠

ここでは、Item編集ページに遷移するためのpathを修正しているよ。

pathに変数を含めたい場合は、:idのように:をpathの中に含めよう。

components/items/ItemList.js

師匠
師匠

ここでは、ItemListのrenderAdmin関数のみを表示しているよ。

Editボタンをクリックした際に、編集ページへ遷移できるよう、buttonからLinkコンポーネントに修正しよう。

components/items/ItemForm.js

師匠
師匠

ここでは新しくItemForm.jsを作成しているよ。

なんで、新しくこのファイルを追加したか、とんぺいくんはわかるかい?

とんぺい
とんぺい

それはItem作成画面(ItemCreate.js)とItem編集画面(ItemEdit.js)が、ほぼ同じ作りになっているからだブゥ!

師匠
師匠

そうだね。異なるページで同一の画面部品を使用したい場合には、共通のコンポーネントを作成して、各ファイルで読み込むことで、コードの記述量を削減できたね。

とんぺい
とんぺい

今回は、Item作成画面(ItemCreate.js)とItem編集画面(ItemEdit.js)でほぼ同じ入力フォームを必要とするから、それをItemForm.jsに記述して、各ファイルでそのコンポーネントを読み込んでいるブゥね!

components/items/ItemCreate.js

師匠
師匠

ここでは先程説明したとおりに、共通コンポーネントであるItemFormを読み込んでいるね。そして、Item作成ページで、Submitボタンが押された場合には、アイテム作成のためのAction creatorが発火されるように、createItemをItemFormに渡しているね。

components/items/ItemEdit.js

師匠
師匠

Item編集ページのFormには、Item作成時に入力したtitleとdescriptionが最初から入力されている必要があるよ。そのため、mapStateToPropsでURLからItemのidを取得し、取得したidを用いて、Formに入力するtitleとdescriptionをstateから取得しているんだ。

とんぺい
とんぺい

師匠!

編集ページで、画面をリロードしたら、正しくItemの情報が読み込まれないブゥ!!

師匠
師匠

それは、stateの中身が存在していないからだね。画面リロードを行うとstateの情報は捨てられるので、もう一度欲しい情報をデータベース(DB)から取得する必要があるんだ。

とんぺい
とんぺい

あっ!componentDidMount()の記述を忘れていたブゥ!

この箇所で、DBからItemの情報を取得しているんだブゥね!

師匠
師匠

そのとおり。componentDidMount内で、DBからItemの情報を取得し、storeに保存することで、mapStateToProps内で、itemをstateから取得できるよ。また、_.pick()は以下のように既存のオブジェクトから、指定されたKeyの値のみを取得して、新しいオブジェクトを作成するよ。

actions/index.js

師匠
師匠

Action creatorの中身を変更しよう。

このファイルでは、個々のItemを取得するためのfetchItemと、Itemを編集する際に発火させるeditItemが新しく追加されているよ。

とんぺい
とんぺい

editItem()では、ちゃんとPATCHメソッドが使われているブゥね!

師匠
師匠

そうだね。今後、既存リソースの変更を行いたい場合は、PUTメソッドとPATCHメソッドを要件に合わせて使い分けていこう。

とんぺい
とんぺい

承知しましたブゥ!

今日も楽しかったブゥ!ありがとうございました!

師匠
師匠

お疲れさま。

それでは、本日のまとめをして終わりにしよう。

まとめ

  • PUTメソッドは渡されたデータを元に、既存のリソースを丸ごと置換する
  • PATCHメソッドは渡されたデータを元に、既存リソースの一部を更新する
  • 共通の画面部品がある場合には、共通コンポーネントを作成する

コメント

  1. […] 前回は、Itemを編集する機能を実装したね。今回は、Itemを削除する機能を実装しよう。 […]

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