前回に続きReact+Firebaseでミニアプリを作っていきます。前回の投稿はこちらから。
-
React + Firebaseのミニアプリを作る【実装編4】
前回に続きReact+Firebaseでミニアプリを作っていきます。前回の投稿はこちらから。 どんなアプリを作るかは【計画編】を見て下さい。 前回まででCreate, Readまでは実装 ...
続きを見る
どんなアプリを作るかは【計画編】を見て下さい。
前回まででCreate, Read, Updateまでは実装できました。最後にDeleteを実装します。
REST APIでCRUD作成(前回の続き)
今回ベースとするソースコードは以下のコードから【実装編2~4】の内容を実装したものになります。
CRUDの完成コードはこちら↓
フォルダ構成やファイルの全体像がわからなくなった場合は完成コードを参照して下さい。
DELETE
削除に関してはSubjectとQ&Aの両方を同時に行います。
コンポーネント
編集の時と同じくツールバーのアイコンを押したときに削除が実行されるようにします。
components > content > DetailView.jsに以下のメソッドを追加します。
const subjectDelete = id => {
dispatch(deleteSubject(id));
history.push("/");
};DetailToolbarにこのメソッドを渡します。
<DetailToolbar
title={item.title}
id={item.id}
handleDelete={subjectDelete}
/>
components > content > detail > DetailToolbar.jsのpropsで受け取り
const { title, id, handleDelete } = props;IconButtonのハンドラに割り当てます。
<IconButton
edge="start"
color="inherit"
aria-label="menu"
onClick={() => handleDelete(id)}
>
<DeleteOutlineIcon />
</IconButton>これでコンポーネント側はOK
Action Creator
通信にDELETEメソッドを使います。ここでQ&Aも同時に削除します。
actions > subjects.js
export const deleteSubject = id => async dispatch => {
try {
await axios.delete(`/subject/${id}.json`);
dispatch(deleteSubjectSuccess(id));
dispatch(deleteQuestionAnswers(id));
} catch (error) {
dispatch(apiFailed("delete subject failed"));
}
};
const deleteSubjectSuccess = id => {
return {
type: ACTION_TYPES.DELETE_SUBJECT,
payload: id
};
};
何らかのエラーがあり、Subjectの削除が上手く行かなかった場合にQ&Aだけ削除されてしまうのを避けるため、deleteSubject内からdeleteQuestionAnswersをdispatchしています。
補足
ここでQ&Aを削除するdeleteQuestionAnswersを呼び出していますが、コンポーネントから直接dispatchしても構いません
deleteQuestionAnswersも同じようにDELETEメソッドで通信すればOKです。
actions > questionAnswers.js
export const deleteQuestionAnswers = id => async dispatch => {
try {
await axios.delete(`qa/${id}.json`);
} catch (error) {
dispatch(apiFailed("delete question failed"));
}
};
最後にstateに変更を加えます
Reducer
配列から要素を削除したい場合はfilterが便利です。
case ACTION_TYPES.DELETE_SUBJECT:
return {
...state,
subjectList: state.subjectList.filter(
item => item.id !== action.payload
)
};
これで削除の実装は完了です。
実際に動かしてみます。現在3つのSubjectが登録されています。
詳細画面のツールバーから削除ボタンを押します。
リスト画面にリダイレクトされ、要素が削除されていることが確認できます。
Firebaseコンソールで確認してもQ&Aについてもきちんと削除されていることが確認できます。
CRUDの完成図
これにてCRUDの全てが実装出来ました！
エラーハンドリングやバリデーションなど所々不備はあるのですが、当面は先を急ぐこととします。
完成したソースコードはこちらから↓
TODO
ここで一旦やることをまとめておこうと思います。
- メッセージの表示
- 通信中に表示するスピナーの実装
- 認証
- 画像アップロード
- SDKで実装
- デプロイ
「メッセージの表示」は無いと開発でも悪影響が出るため、先に実装していきます。
スピナーは優先順位は低いですが、簡単なので先に実装します。
次に認証や画像アップロードを実装し、その後CRUD・認証含めてSDKで再実装します。
最後にデプロイまでやって終わろうと思います。
実装自体はすでに終わっているため、あとは記事を書いていくだけです。
それでは。