React + Reduxで作成するメモアプリ

React + Reduxでメモをアプリを作ってみました。

はじめに

この記事では、React+Reduxを使用してカウントアプリを作ってみたいと思います。
下記が完了している前提で話を進めていくので、インストールされてない方は実施してください。

Node.jsのインストール
パッケージマネージャー yarnのインストール
creat-react-appのインストール

参考：https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5

1. プロジェクトを作成する

まず、任意のディレクトリに移動し、create-react-appコマンドでプロジェクトを作成します。

$ create-react-app memo

実行後、下記のようなメッセージが表示されていればOKです。

Initialized a git repository.

Success! Created countApp at /Users/******/countApp

作成したプロジェクト配下に移動し、下記のstartコマンドを実行します。

$cd countApp
$yarn start

実行後、ブラウザが起動し、以下の画面が表示されていればOKです。

2. 必要なパッケージをインストールする

作成したプロジェクト配下に移動します。
今回はlodash、 redux、react-redux、redux-form、react-router-domの5つのパッケージを使用するので、yarnを使ってインストールします。

$yarn add lodash react-redux react-router-dom redux redux-form

3. 今回作成するメモアプリのフォルダー構成

フォルダーの構成は以下の通りです。

.
 ├──  node_modules
 ├──  public
 ├──  src
      ├── actions
          └── index.js
      ├── components
          └── memoIndex.js
          └── memoNew.js
          └── memoShow.js
      ├── reducers
          ├── index.js
          └── memo.js  
 ├── index.js
 ├── serviceWorker.js 
 ├── yarn.lock
 ├── package.json
 └── README.md

4. メモアプリ実装

まず、アクションの作成します。

actions/index.js

//アクション定義
export const READ_MEMOS = "READ_MEMOS";
export const READ_MEMO = "READ_MEMO";
export const ADD_MEMO = "ADD_MEMO";
export const UPDATE_MEMO = "UPDATE_MEMO";
export const DELETE_MEMO = 'DELETE_MEMO';

//メモ一覧を取得する
export const getMemos = () => ({
    type : READ_MEMOS,
});

//idで指定したメモを取得する
export const getMemo = (id) => ({
    type : READ_MEMO,
    params : id,
});

//メモを追加する
export const addMemo = (values) => ({
    type : ADD_MEMO,
    params : values,
});

//idで指定したメモを更新する
export const updateMemo = (id, values) => ({
    type : UPDATE_MEMO,
    id : id,
    params : values,
});

//idで指定したメモを削除する
export const deleteMemo = (id) => ({
    type : DELETE_MEMO,
    id : id,
});

続いて、reducerを作成してきます。

reducers/index.js

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import memos from './memo';

//アプリケーション内に存在するreducerを統括する
export default combineReducers({ memos, form });

reducers/memo.js

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

//ユニークIDを生成する（ここは今回適当）
const getUniqueStr = () => {
  return new Date().getTime().toString(16);
}

//アクションに応じてStateの状態を決定する
export default (memos = {}, action) => {
  switch(action.type){
      case READ_MEMOS:
        return memos;
      case READ_MEMO:
        return memos;
      case ADD_MEMO:
        const insertData = {
          id : getUniqueStr(),
          title : action.params.title,
          memo : action.params.memo,
        }
        return { ...memos,[getUniqueStr()] : insertData};
      case UPDATE_MEMO:
        const updateData = {
          id : action.id,
          title : action.params.title,
          memo : action.params.memo,   
        }
        return { ...memos,[updateData.id] : updateData};
      case DELETE_MEMO:
        delete memos[action.id];
        return {...memos};
      default:
        return memos;
    }
}

続いて、index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import {Switch, BrowserRouter, Route } from 'react-router-dom';

//Local Import
import MemoIndex from './components/memoIndex';
import MemoNew from './components/memoNew';
import MemoShow from './components/memoShow';
import reducer from './reducers';
import * as serviceWorker from './serviceWorker';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/new" component={MemoNew} />
        <Route path="/show/:id" component={MemoShow} />
        <Route exact path="/" component={MemoIndex} />
        <Route exact path="/index" component={MemoIndex} />
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

続いて、コンポーネント

components/memoIndex.js

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

//Local Import
import { getMemos } from '../actions';
import _ from 'lodash';

//メモ一覧画面
class MemoIndex extends Component{
  componentDidMount(){
    this.props.getMemos();
  }

  //メモ一覧をレンダリングする
  renderMemos = () =>{
    const memos = this.props.memos;
    return _.map(memos, memo =>(
      <tr key={memo.id}>
        <td>
          <Link to={`/show/${memo.id}`}>
            {memo.title}
          </Link>
        </td>
        <td>{memo.memo}</td>
      </tr>
    ));
  }

  render(){
    return (
      <React.Fragment>
        <table>
          <thead>
            <tr>
              <th>タイトル</th>
              <th>メモ</th>
            </tr>
          </thead>
          <tbody>
            {this.renderMemos()}
          </tbody>
        </table>
        <Link to='/new'>追加</Link>
      </React.Fragment>
    )
  }
}

//Stateの情報をPropsで使用できるようする
const mapStateToProps = state => ({ memos : state.memos });

//Dispatch(アクションクリエイター)をPropsで使用できるようにする
const mamDispatchToProps = ({ getMemos })

//コンポーネントをRedux Storeに接続する
export default connect( mapStateToProps, mamDispatchToProps )(MemoIndex);

components/memoShow.js

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

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

//メモ編集画面
class memoShow extends Component {    
  //ComponentがDOMツリーに追加された状態でコールされる
  componentDidMount() {
    const { id } = this.props.match.params;
    if( id ) this.props.getMemo(id);
  }

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

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

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

  render(){
    const { handleSubmit, pristine, submitting, invalid} = this.props;  
    console.log(submitting)                                             
    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>
          <input type="submit" value="更新" disabled={pristine || submitting || invalid} />
          <Link to="/" >キャンセル</Link>
          <Link to="/" onClick={this.onDeleteClick}>削除</Link>
        </div>
      </form>
    );
  }
}

const validate = values => {
    const errors= {};
    console.log(values);
    if(!values.title) errors.title = "タイトルを入力してください";
    if(!values.memo)  errors.memo = "メモを入力してください";

    return errors;
}

//Stateの情報をPropsで使用できるようする
const mapStateToProps = (state, ownProps) => {
  const memo = state.memos[ownProps.match.params.id];
  //編集画面などで初期化した状態でフォーム画面表示したい場合には、reduxFormのパラメータとしてinitialValuesの名称で初期値を指定する。
  return { initialValues : memo } 
};

//Dispatch(アクションクリエイター)をPropsで使用できるようにする
const mapDispatchToProps = ({ deleteMemo, getMemo, updateMemo});

//コンポーネントをRedux Storeに接続する
export default connect(mapStateToProps, mapDispatchToProps)(
    reduxForm({validate, form: 'memoShowForm', enableReinitialize: true})(memoShow)
);

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';

//Local Import
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(){
    //redux-formではformのonSubmitにhandleSubmitを渡すことでformの送信の制御を行なっている
    //handleSubmitに関数を渡すと送信時に呼ばれるため、ここではonSubmitを指定している。
    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>
          <input type="submit" value="追加" disabled={pristine || submitting || invalid} />
          <Link to="/" >キャンセル</Link>   
        </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)
);

5 動かしてみる

完成したのがこちら、、、
新規作成、削除、編集できるようになってます