やまでぃーのブログ

ReactでRedux Formを使ってフォームの管理をしてみる

React ReactでReduxFormを使ってみる

 

こんにちは。

今回はReact + Redux Formでフォームの管理をしてみましたので、その設定方法を書いていきたいと思います。

React でフォームの管理をすると、stateでのフォームの管理が大変だったりします。

Redux Formを使えば自動で値を保持してくれるようになるみたいなので、管理も楽になるかなーと思って今回使用してみました。

 

目次

Redux Formをインストール

 

Redux Formを利用するためにReactのプロジェクトの雛形を作成します。

$ npm install -g create-react-app
$ create-react-app sample
# Success! Created sample at /Path/To/sample

 

雛形の作成ができたら指示通り以下のコマンドでブラウザが起動してReactのデフォルトページが表示されると思います。

$ cd sample
$ npm start

 

Reduxを利用するため、Redux関連のパッケージも入れておきます。

$ npm install redux react-redux

 

ReactのプロジェクトにRedux Formをインストールします。

$ npm install redux-form

 

これで一通りのインストールは完了しました。

 

ストアの設定

 

Redux FormではReduxを利用するためのストアの設定をしていきます。

src/store.js を作成し、そこにRedux Formを使用するための設定を記述していきます。

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer,
});

export default createStore(rootReducer);

 

また、ストアを作成したので、src/index.jsにストア利用の記述をします。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import Store from './store';

ReactDOM.render(
  <Provider store={Store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

 

Redux Formを利用する準備も完了しました。

 

簡単なフォームを作成する

 

次にRedux Formを使ってみるためのSampleFormというコンポーネントをsrc/SampleForm.jsに作成したいと思います。

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const SampleForm = function (props) {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>お名前：<Field name="name" component="input" type="text" /></label>
      </div>
      <button type="submit">送信</button>
    </form>
  );
}

// このコンポーネントでRedux Formを使えるようにする
export default reduxForm({
  form: 'sample-form', // このフォームの一意な名前
})(SampleForm);

Redux Formではフォームの入力要素をFieldにすることによって、ストアとの連携をしてくれるようになります。

Fieldでは、name属性とcomponent属性は必須で、component属性には文字列で”input”、”select”のように与えるとそれに応じた要素になります。

 

最後にsrc/App.jsの内容を今作成したフォームに置き換えます。

SampleForm にonSubmit を指定することによって、SampleForm内の handleSubmit の挙動を指定しています。

import React from 'react';
import './App.css';
import SampleForm from './SampleForm';

function App() {
  return (
    <div className="App">
      <SampleForm onSubmit={value => console.log(value)} />
    </div>
  );
}

export default App;

 

これで、フォームに適当な値を入力して送信ボタンを押すとコンソールに入力値が表示されます。

 

更にフォームを充実させる

 

次に他の形式のフォームを使ってみたいと思います。SampleForm.jsを変更します。

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const SampleForm = function (props) {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>お名前：<Field name="name" component="input" type="text" /></label>
      </div>
      <div>
        年齢：
        <label>
          <Field name="age" component="input" type="radio" value="10-19" />10〜19歳
        </label>
        <label>
          <Field name="age" component="input" type="radio" value="20-39" />20〜39歳
        </label>
        <label>
          <Field name="age" component="input" type="radio" value="40-" />40歳以上
        </label>
      </div>
      <div>
        <label>希望プラン：
          <Field name="plan" component="select">
            <option value="A">プランA</option>
            <option value="B">プランB</option>
            <option value="C">プランC</option>
          </Field>
        </label>
      </div>
      <button type="submit">送信</button>
    </form>
  );
}

export default reduxForm({
  form: 'sample-form',
})(SampleForm);

 

selectやradioボタンでのフォームも問題なくできました。

これら以外は試していませんが、inputのそれぞれのtypeやselect、textareaなどが使用できると思われます。

 

まとめ

 

ReactでRedux Formを利用したフォームの管理はいかがでしたでしょうか。

フォームの値の管理を自前でやろうとすると対応忘れなどがあり大変だと思うので、設定を少しするだけでフォームの管理を簡単にできるのはいいですね。

 

Reactの最新記事4件