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

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

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

前回まででCreate, Readまでは実装できました。今回はUpdateの実装です。

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

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

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

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

SubjectのUPDATE

SubjectのUpdateは非常に簡単でCreateの処理とほぼ同じです。PUTメソッドを使って更新をするところとreducerがやや異なります。

コンポーネント

まずは編集画面を表示させます。とはいえフォームとレイアウトは再利用出来るように分割してあったのでほぼonSubmit以外は同じようなコードになります。

components > content > form > SubjectEdit.js

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

const SubjectEdit = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const item = useSelector(state => state.subjects.subject);
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    data.id = item.id;
    dispatch(updateSubject(data));
    history.push("/detail/" + item.id);
  };
  return (
    <SubjectFormLayout title="編集">
      <SubjectForm
        handleSubmit={handleSubmit}
        register={register}
        onSubmit={onSubmit}
        title={item.title}
      />
    </SubjectFormLayout>
  );
};

export default SubjectEdit;

これを表示するためContent.jsにRouteを追加します。

components > layout > Content.js

// import SubjectEdit from "../content/form/SubjectEdit";

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

あとはリンクを設置すれば完了です。詳細画面(DetailView)のツールバーから編集できるようにするので、

DetailToolbar.jsを少し変更します。Subjectのidをpropsで受け取るように変更します。

const { title, id } = props;

またペンのIconButtonにcomponent={Link}とto={`/edit/${id}`}を追加します。

<IconButton
  edge="start"
  color="inherit"
  aria-label="menu"
  component={Link}
  to={`/edit/${id}`}
>
  <EditOutlinedIcon />
</IconButton>

以上でコンポーネントに関しては終了です。

Action Creator

action creatorでやることはシンプルで、PUTメソッドでデータを送信し、成功すればアクションを生成する。これだけです。

export const updateSubject = data => async dispatch => {
  try {
    await axios.put(`/subject/${data.id}.json`, data);
    dispatch(updateSubjectSuccess(data));
  } catch (error) {
    dispatch(apiFailed("update subject failed"));
  }
};

const updateSubjectSuccess = data => {
  return {
    type: ACTION_TYPES.UPDATE_SUBJECT,
    payload: data
  };
};

Reducer

reducerでは変更したデータをstateのsubjectに入れつつ、subjectListも変更しています。

subjectListではIDを元に更新されたデータのオブジェクトのみ入れ替えて、新たな配列をmapによって生成しています。

case ACTION_TYPES.UPDATE_SUBJECT:
  return {
    ...state,
    subject: action.payload,
    subjectList: state.subjectList.map(item =>
      item.id === action.payload.id ? action.payload : item
    )
  };

以上でSubjectのUpdateは実装完了です。

このように編集画面が表示され、あらかじめ現在の値がセットされています。

編集機能も動作していますので確認してみて下さい。

リロード・もしくは一旦リスト画面に戻れば、更新自体は正しくされていることが確認できるはずです。

(正直バグに関しては認識していましたが、すっかり忘れておりました😋)

Q&AのUPDATE

次にQ&A部分でのUpdateを実装していきたいと思います。一応このアプリのメインとなる部分ですね。

コンポーネント

今まで表示してきたQ&AはただのTextFieldでした。これをきちんとformで囲い、各Fieldにnameを設定します。

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

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useHistory, useParams } from "react-router-dom";
import { useForm } from "react-hook-form";
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";
import { updateQuestionAnswers } from "../../actions/questionAnswers";

const DetailView = props => {
  const dispatch = useDispatch();
  const history = useHistory();
  const { id } = useParams();
  const { register, handleSubmit } = useForm();
  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]);

  const onSubmit = data => {
    dispatch(updateQuestionAnswers(id, data));
  };

  return (
    <Grid container spacing={2}>
      <Grid item xs={12}>
        <DetailToolbar
          title={item.title}
          id={item.id}
        />
      </Grid>
      <Grid item xs={12}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <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]}
                    questionFieldName={ky}
                    answer={answers[answerKey]}
                    answerFieldName={answerKey}
                    register={register}
                  />
                </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>
        </form>
      </Grid>
    </Grid>
  );
};

export default DetailView;

nameに関してはQuestionならq1, q2, ...、Answerならa1, a2, ...とします。そこで多少強引ですが、mapでQuestionのkeyを取得し、ky.replace("q", "a");によってAnswerのkeyを取得しています。このkeyがそのままフォームのnameになります。

あとはこのnameをQuestion, Answerに設定します。

components > content > detail > QuestionAnswer.jsを以下のように編集します。

import React from "react";
import Question from "./Question";
import Answer from "./Answer";

const QuestionAnswer = props => {
  const {
    question,
    answer,
    register,
    answerFieldName,
    questionFieldName
  } = props;
  return (
    <React.Fragment>
      <Question
        question={question}
        register={register}
        name={questionFieldName}
      />
      <Answer answer={answer} register={register} name={answerFieldName} />
    </React.Fragment>
  );
};

export default QuestionAnswer;

Questionを以下のように編集react hook form用にinputRefを設定し、nameも追加します。

import React from "react";
import InputBase from "@material-ui/core/InputBase";
import QuestionBox from "./QuestionBox";

const Question = props => {
  const { question, register, name } = props;
  return (
    <QuestionBox>
      <InputBase
        name={name}
        label="Q"
        defaultValue={question}
        fullWidth
        inputRef={register}
        autoComplete="off"
      />
    </QuestionBox>
  );
};

export default Question;

AnswerもQuestionと同じように編集します。

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

const Answer = props => {
  const { name, answer, register } = props;
  return (
    <Box mt={2}>
      <TextField
        name={name}
        multiline
        rows="4"
        defaultValue={answer}
        variant="outlined"
        fullWidth
        inputRef={register}
      />
    </Box>
  );
};

export default Answer;

これでコンポーネントはOKです。

Action Creator

とってもシンプルです。putメソッドでデータを送信するだけです。

アクセス先の`qa/${id}.json`のidはSubjectのIDである点には注意して下さい。

export const updateQuestionAnswers = (id, data) => async dispatch => {
  try {
    await axios.put(`qa/${id}.json`, data);
  } catch (error) {
    dispatch(apiFailed("update question failed"));
  }
};

今回は入力されている値を逐一stateで管理はしないため、これでQ&Aも完了です。

成功のメッセージをまだ実装していないため、一見無反応ですが、処理自体はきちんと動作しています。

リロードすればきちんと保存されていることが確認できます。

これでUpdate処理の実装が完了しました。

バグについて

Subjectの編集(/edit/:id)でSaveボタンを押すと、詳細画面(/detail/:id)に遷移しますが、その際に編集前のデータ(title)が表示されるというバグがあります。

バグの原因

これはSubjectEdit.jsのonSubmitにて以下の処理がされています。

dispatch(updateSubject(data));
history.push("/detail/" + item.id);

ここで問題なのはupdateSubjectの処理が終了する前にhistory.pushが実行され、詳細画面でデータを取得するAPI通信がされてしまうことです。

これはデバッグツールを使うとよくわかります。

このようにupdateSubjectと詳細画面表示のためのgetSubjectが並列で(非同期で)実行されていることがわかります。

それぞれ独立で動いているため、Subjectの更新がされる前に詳細画面でのデータ取得が始まってしまい、古いデータを取得してしまっているわけです。

Redux DevToolsで見てみます。タイトルを「Next Gen JavaScript」から「JavaScript」へ変更してみます。

「UPDATE_SUBJECT」は期待通り動いていて(画面右)、この時点では編集後の「JavaScript」が表示されています。

その後の「GET_SUBJECT」が問題で、古いデータを読み込んだ処理が後で実行されているため、「UPDATE_SUBJECT」で更新されたstateが古いデータ(Next Gen JavaScript)で上書きされてしまっています。

解決策

解決策はいくつかありますが、最もわかりやすい方法はSubjectの更新処理が終わるのを待ってからページ遷移を行うことです。

今回のように非同期通信が終了するのを待ってからページ遷移をするのには一工夫が必要になります。

これに関しては次の記事で書こうと思います。

記事を投稿しました。↓

続く