React + Reduxでメモアプリを作成(一件更新⑥)

一件取得⑤からの続きをしていきます。
https://kazunaka.com/react-redux-memoapp-five/

一件の更新ができるところまでいきます。

ファイルを編集

ディレクトリ「src」以下のファイルを編集していきます。

＊コードの重複部分もありますが、どこに記載していいかを分かりやすくしたくて
重複部分を書いているので、全部コピペでは完成はできないです。ご注意ください。

actions/index.jsを編集していきます。
まずは「// アクション定義」に一行追記します。

export const UPDATE_MEMO = "UPDATE_MEMO";

以下のコードを新規作成のaddMemoの関数の終わりの後に追記します。

// 更新
export const updateMemo = (id, values) => ({
	type : UPDATE_MEMO,
	id : id,
	params : values,
});

続いてreducers/memo.jsを編集していきます。
まずはimportを編集して、UPDATE_MEMO,を追記します。

import {
	READ_MEMOS,
	READ_MEMO,
	ADD_MEMO,
	UPDATE_MEMO,
} from '../actions';

続けて、switch文を編集します。
case UPDATE_MEMOのケース文を追記します。

		case UPDATE_MEMO:
			const updateData = {
				id : action.id,
				title : action.params.title,
				memo : action.params.memo,
			}
			return {...memos, [updateData.id] : updateData};
		default:
			return memos;

続いてcomponents/memoShow.jsの編集です。
importにupdateMemoを追加します。

import { getMemo, updateMemo } from '../actions';

onSubmitの関数に一行追加します。

	onSubmit = (values) => {
		const {id} = this.props.match.params;
		this.props.updateMemo(id, values);
		this.props.history.push('/');
	}

render() の関数のreturnの部分に更新ボタンのためのinputを追加します。

				<div>
					<div><input type="submit" value="更新" disabled={pristine || submitting || invalid} /></div>
					<div><Link to="/">キャンセル</Link></div>
				</div>
			</form>

最後の行の方にあるmapDispatchToPropsにもupdateMemoを追加します。

const mapDispatchToProps = ({ getMemo, updateMemo });

アプリを実行

コマンドでアプリを実行しましょう。

$ yarn start

エラーなく動きましたでしょうか。
新規でメモを作成して、一件取得をして
タイトルとメモを更新してみましょう。

無事更新されたら成功です。

次は一件の削除をしていきたいと思います。
https://kazunaka.com/react-redux-memoapp-seven/