React + Reduxでメモアプリを作成(一件削除⑦)

一件更新⑥からの続きをしていきます。
https://kazunaka.com/react-redux-memoapp-six/

一件の削除ができるところまでいきます。(デザインはないです。)

ファイルを編集

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

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

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

export const DELETE_MEMO = 'DELETE_MEMO';

以下のコードを更新のupdateMemoの関数の終わりの後に追記します。

// 削除
export const deleteMemo = (id) => ({
	type : DELETE_MEMO,
	id : id,
});

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

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

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

		case DELETE_MEMO:
			delete memos[action.id];
			return {...memos};
		default:
			return memos;

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

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

onSubmitの関数の終わりにonDeleteClick関数を追加します。

	onDeleteClick = () => {
		const { id } = this.props.match.params;
		this.props.deleteMemo(id);
		this.props.history.push('/');
	}

render() 関数のreturn部分に削除のためのLinkを一行追加します。

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

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

const mapDispatchToProps = ({ getMemo, updateMemo, deleteMemo });

アプリを実行

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

$ yarn start

メモを作成して削除を動かしてみましょう。

無事削除ができたら成功です。

次で更新を押しても状態を保てるコードにします。
https://kazunaka.com/react-redux-memoapp-eight/