React + Firebaseのミニアプリを作る【実装編3】

前回に続きReact+Firebaseでミニアプリを作っていきます。前回の投稿はこちらから。

どんなアプリを作るかは【計画編】を見て下さい。

前回はReduxのセットアップと、Firebaseからデータを取得し表示するところまで実装しました。

今回はデータの作成、すなわちCRUDのCreate部分から実装していきます。

REST APIでCRUD作成(前回の続き)

今回ベースとするソースコードは以下のコードから【実装編2】の内容を実装したものになります。

GitHub

coders-shelf/five-questions

https://github.com/coders-shelf/five-questions/tree/f855c0e8073d1097a3cdf9557b9f82ad50d9ce99

CRUDの完成コードはこちら↓

GitHub

coders-shelf/five-questions

https://github.com/coders-shelf/five-questions/tree/3478e857633dba57b8f4ce08fcf438ab6ce08c16

フォルダ構成やファイルの全体像がわからなくなった場合は完成コードを参照して下さい。

CREATE

Subjectに関してデータの作成が出来るよう実装していきます。

コンポーネント

Subject（お題）の新規作成のためにSubjectCreateコンポーネントを作成します。フォームやレイアウトは編集のときに再利用できるように別コンポーネントに分割します。

src > components > content > form > SubjectCreate.jsを作成します。

import React from "react";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import { useForm } from "react-hook-form";
import { createSubject } from "../../../actions/subjects";
import SubjectForm from "./SubjectForm";
import SubjectFormLayout from "../../layout/SubjectFormLayout";

const SubjectCreate = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    dispatch(createSubject(data));
    history.push("/");
  };
  return (
    <SubjectFormLayout title="新規作成">
      <SubjectForm
        handleSubmit={handleSubmit}
        register={register}
        onSubmit={onSubmit}
      />
    </SubjectFormLayout>
  );
};

export default SubjectCreate;

重要な点はonSubmit部分でcreateSubjectをdispatchし、その後一覧ページに遷移させているところです。

フォームの処理にはReact Hook Formを使用しています。React Hook Form に関しては以下の記事で取り上げていますので興味のある方はどうぞ。

次に同じフォルダにSubjectFormを作成します。

import React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

const SubjectForm = props => {
  const { handleSubmit, register, onSubmit, title } = props;
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        label="タイトル"
        variant="outlined"
        fullWidth
        inputRef={register}
        name="title"
        autoComplete="off"
        defaultValue={title}
      />
      <Box textAlign="center" mt={2}>
        <Button variant="contained" color="primary" type="submit">
          Save
        </Button>
      </Box>
    </form>
  );
};

export default SubjectForm;

components > layout > SubjectFormLayout.jsを以下のように書きます。

import React from "react";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";

const SubjectFormLayout = props => {
  const { title, children } = props;
  return (
    <React.Fragment>
      <Grid item xs={12}>
        <Box textAlign="center" mt={2}>
          <h2>{title}</h2>
        </Box>
        <Link to="/">
          <Button
            variant="contained"
            color="primary"
            startIcon={<ArrowBackIosIcon />}
          >
            Back
          </Button>
        </Link>
        <Box mt={2}>{children}</Box>
      </Grid>
    </React.Fragment>
  );
};

export default SubjectFormLayout;

作成したフォーム画面を表示するため、components > layout > Content.js内に以下のようにRouteを追加して下さい。

// import SubjectCreate from "../content/form/SubjectCreate";  インポートも忘れずに

<Route path="/create">
  <Grid container justify="center" className={classes.root}>
    <Grid item xs={12} sm={10} md={8}>
      <SubjectCreate />
    </Grid>
  </Grid>
</Route>

これで/createにアクセスすればSubjectCreateコンポーネントが表示されます。(この段階ではaction creatorを作っていないのでエラーになります。)

Action Creator

次にSubjectの新規作成のaction creatorを作成します。Subject作成時にQuestion&Answerの初期データも作成します。

流れとしては

1. POSTメソッドのAPI通信でデータを新規作成
2. 作成されたSubjectのIDを取得
3. IDを元にstateのsubjectListを変更
4. それと同時にIDを用いてQ&Aの初期データを作成(ここでもAPI通信)

ということをやっていきます。以下はactions > subjects.js。

import { createInitialQuestion } from "./questionAnswers"; // これをimportに追加

export const createSubject = data => async dispatch => {
  const subject = { title: data.title, image: "" }; // imageには空の文字列を入れておく
  try {
    const result = await axios.post("/subject.json", subject);  // POSTメソッドでAPI通信
    dispatch(createSubjectSuccess(data, result.data.name));  // state変更
    dispatch(createInitialQuestion(result.data.name));  // 作成する際にはQuestion & Answerも同時に作成
  } catch (error) {
    dispatch(apiFailed("create subject failed"));
  }
};

const createSubjectSuccess = (data, id) => {
  return {
    type: ACTION_TYPES.CREATE_SUBJECT,
    payload: {
      id: id,
      title: data.title,
      image: "/image"  // imageは適当な値を入れておく
    }
  };
};

通信後に返ってくるデータのdata.nameに作成されたオブジェクトのIDが入っていますので、これを利用してQ&Aの初期データを作成します。

DBは「qa >  subject のID > データ」という構造にしたいため、Subjectと同じようにPOSTメソッドで通信すると意図した構造になりません。結論から言うとPATCHを使います。

src > actions > questionAnswers.jsに以下のように書きます。

import * as ACTION_TYPES from "./actionTypes";
import axios from "../axios";
import { apiFailed } from "./index";
import { qas } from "../initialQuestions";

export const createInitialQuestion = id => async dispatch => {
  try {
    /*
        メソッドはpatchでなければならない。
        postにした場合は id: { value }の形で保存されるため
        axios.post("/qa.json", { [id]: qas })とすると
        u-id: {
            id: {
                value
            }
        }
        という1階層深い形になる。
        axios.post("/qa/${id}.json", { qas })とすると
        id: {
            u-id: {
                value
            }
        }
        となる
        putの場合は目的通りの形になるが、データを追加すると古いデータが上書き消去されてしまう。
        そのためpatchである必要がある。
       */
    await axios.patch("/qa.json", { [id]: qas });
  } catch (error) {
    dispatch(apiFailed("create initial question failed"));
  }
};

ソースコード中に書いてありますが、メソッドはpatchでなくてはなりません。これはFirebaseの仕様上postやputを使うと階層が意図せず深くなってしまったり、データが上書きされたりしてしまうからです。

これに関しては公式ドキュメントが最も参考になります↓

Firebase

 

1 User

5 Pockets

データの保存  |  Firebase

https://firebase.google.com/docs/database/rest/save-data?hl=ja

気になる方はご自身で挙動を確かめてみて下さい。

src > initialQuestions.jsに以下のように質問の初期データを設定しておきます。

export const qas = {
  q1: "「それ」を一言で表すと？",
  q2: "「それ」はどんな問題をどう解決した？",
  q3: "「それ」の代わりとなるものは？",
  q4: "「それ」に関連するキーワードは？",
  q5: "「それ」の目次を作るとしたら？",
  a1: "",
  a2: "",
  a3: "",
  a4: "",
  a5: ""
};

あとはReducer側で通信結果をstateに反映させるだけです。

Reducer

reducers > subjects.jsに以下のcase文を追加します。追加したデータをconcatで連結。

    case ACTION_TYPES.CREATE_SUBJECT:
      return {
        ...state,
        subjectList: state.subjectList.concat(action.payload)
      };
    

これでSubjectのCreateは完成です。

Createボタンを押すことでこのようにフォームが表示されるはずです。

新規作成をするとFirebase側にきちんと保存されているはずです。確認してみて下さい。

詳細画面・Q&Aの表示

続いて作成したQ&Aの初期データを詳細画面で表示させます。

コンポーネント

データの表示のためSubjectのIDを取得し、IDを元にAPIでデータを取得します。

またuseSelectorを使って表示するデータをstateから取得するよう変更します。

DetailView.jsを以下のように編集します。

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import QuestionAnswer from "./detail/QuestionAnswer";
import DetailToolbar from "./detail/DetailToolbar";
import ExtraQuestion from "./detail/ExtraQuestion";
import { getSubject } from "../../actions/subjects";

const DetailView = props => {
  const dispatch = useDispatch();
  const { id } = useParams();
  const item = useSelector(state => state.subjects.subject);
  const questions = useSelector(state => state.subjects.questions);
  const answers = useSelector(state => state.subjects.answers);

  useEffect(() => {
    dispatch(getSubject(id));
  }, [dispatch, id]);

  return (
    <Grid container spacing={2}>
      <Grid item xs={12}>
        <DetailToolbar title={item.title} id={item.id} />
      </Grid>
      <Grid item xs={12}>
        <Grid container spacing={5}>
          {Object.keys(questions).map(ky => {
            const answerKey = ky.replace("q", "a");
            return (
              <Grid item key={ky} xs={12}>
                <QuestionAnswer
                  question={questions[ky]}
                  answer={answers[answerKey]}
                />
              </Grid>
            );
          })}
          <Grid item xs={12}>
            <ExtraQuestion />
          </Grid>
          <Grid item xs={12}>
            <Box textAlign="center">
              <Button variant="contained" color="primary" type="submit">
                Save
              </Button>
            </Box>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default DetailView;

詳細画面はpath="/detail/:id"でアクセスしているので、このURLからIDを取得します。

const { id } = useParams();でURLのParamを取得できます(参考)ので、このIDを元にデータの取得を行います。

またcomponents > content > detail > DetailToolbar.jsで

titleをpropsから取得するよう変更します。

const { title } = props

Action Creator

詳細画面ではSubjectデータとQ&Aデータのどちらも必要になります。

それぞれGETリクエストで取得します。

export const getSubject = id => async dispatch => {
  try {
    const result = await axios.get(`/subject/${id}.json`);  // subjectの取得
    const questionAnswers = await axios.get(`qa/${id}.json`);  // Q&Aの取得
    dispatch(getSubjectSuccess(id, result.data, questionAnswers.data));
  } catch (error) {
    dispatch(apiFailed("get subject failed"));
  }
};

const getSubjectSuccess = (id, subjectData, questionAnswers) => {
  let qas = { questions: {}, answers: {} };
  Object.keys(questionAnswers).forEach(key => {
    key.startsWith("q")
      ? (qas["questions"][key] = questionAnswers[key])
      : (qas["answers"][key] = questionAnswers[key]);
  });
  return {
    type: ACTION_TYPES.GET_SUBJECT,
    payload: { id: id, data: subjectData, questionAnswers: qas }
  };
};

前回の記事のDB設計の通りDB側ではQuestionとAnswerが同じ階層で保存されているため、getSubjectSuccessでは取得したデータをそれぞれquestionsオブジェクト, answersオブジェクトに分けています。

つまり以下のようなデータを

{
  "a1" : "",
  "a2" : "",
  "a3" : "",
  "a4" : "",
  "a5" : "",
  "q1" : "「それ」を一言で表すと？",
  "q2" : "「それ」はどんな問題をどう解決した？",
  "q3" : "「それ」の代わりとなるものは？",
  "q4" : "「それ」に関連するキーワードは？",
  "q5" : "「それ」の目次を作るとしたら？"
}

questions = {
  q1: "「それ」を一言で表すと？",
  q2: "「それ」はどんな問題をどう解決した？",
  q3: "「それ」の代わりとなるものは？",
  q4: "「それ」に関連するキーワードは？",
  q5: "「それ」の目次を作るとしたら？"
};

answers = {
  a1: "",
  a2: "",
  a3: "",
  a4: "",
  a5: ""
};

このように変換しています。

またactionTypes.jsにGET_SUBJECTを追加しておいて下さい。

export const GET_SUBJECT = "GET_SUBJECT";

Reducer

action.payloadのデータはSubjectのIDとData、そしてQuestionsとAnswers(がまとめられたオブジェクト)です。

これらをそれぞれstateのsubject, questions, answersに入れます。

reducers > subjects.jsに以下のcase文を追加します。

case ACTION_TYPES.GET_SUBJECT:
  return {
    ...state,
    subject: { ...action.payload.data, id: action.payload.id },
    questions: action.payload.questionAnswers.questions,
    answers: action.payload.questionAnswers.answers
  };

これでQ&Aも含めた詳細画面の表示は実装できました。

確認してみます。

このように表示されればOKです。

Answerの初期データが空の文字列なので表示されませんが、Questionはきちんと表示されています。

Firebaseコンソールから直接DBに値を入れればAnswerも表示されることが確認できます。

これでCRUDのうちCRまで出来ました。次はUpdateを実装します。

===

次の記事は明日中に投稿予定です。

続きはこちらから↓