React + Reduxでメモアプリを作成(新規作成③)

2020年6月5日2021年1月24日

表示②からの続きをしていきたいと思います。
https://kazunaka.com/react-redux-memoapp-two/

ファイルを編集

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

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

actions/index.jsを編集していきます。
メモのアクションを追記していきます。
新規作成ができるようになるとこまでいきたいと思います。
// アクション定義にまずは一行追記します。

export const ADD_MEMO = 'ADD_MEMO';

以下のコードを一覧取得のgetMemosの関数の終わりの後に追記します。

// メモの新規作成
export const addMemo = (values) => ({
	type: ADD_MEMO,
	params: values,
});

次はreducers/memo.jsの編集です。まずimportを編集します。

import { v4 as uuidv4 } from 'uuid';
import {
	READ_MEMOS,
	ADD_MEMO,
} from '../actions';

続けて、switch文を編集します。

	switch (action.type) {
		case READ_MEMOS:
			return memos;
		case ADD_MEMO:
			var uid = uuidv4();
			const insertData = {
				id: uid,
				title: action.params.title,
				memo: action.params.memo,
			}
			return {...memos, [uid] : insertData};
		default:
			return memos;
	}

次にindex.jsの編集です。まずはimportを追加します。

import MemoNew from './components/memoNew';

Switchの方に「<Route ~~{MemoNew} />」を追記します。

			<Switch>
				<Route exact path="/" component={MemoIndex} />
				<Route path="/new" component={MemoNew} />
			</Switch>

続いてcomponents/memoIndex.jsの編集です。
</table>の後に＜Link ~~>の１行を追記します。

				</table>
				<Link to="/new">追加</Link>
			</React.Fragment>

components/memoNew.jsを書いていきます。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';

import { addMemo } from '../actions';

class memoNew extends Component {
	renderField = (field) => {
		const {input, label, type, meta:{touched, error} } = field;
		return (
			<div>
				<input {...input} placeholder={label} type={type} />
				{touched && error && <span>{error}</span>}
			</div>
		);
	}

	onSubmit = (values) => {
		this.props.addMemo(values);
		this.props.history.push('/');
	}

	render() {
		const { handleSubmit, pristine, submitting, invalid } = this.props;
		return (
			<form onSubmit={handleSubmit(this.onSubmit)}>
				<div>
					<Field label="タイトル" name="title" type="text" component={this.renderField} />
				</div>
				<div>
					<Field label="メモ" name="memo" type="text" component={this.renderField} />
				</div>
				<div>
					<div><input type="submit" value="追加" disabled={pristine || submitting || invalid } /></div>
					<div><Link to="/">キャンセル</Link></div>
				</div>
			</form>
		);
	}
}

const validate = values => {
	const errors = {};
	if (!values.title) errors.title = 'タイトルが入力されていません。';
	if (!values.memo) errors.memo = 'メモを入力してください。';
	return errors;
};

const mapDispatchToProps = ({ addMemo });

export default connect(null, mapDispatchToProps)(
	reduxForm({validate, form: 'memoNewForm'})(memoNew)
);