React + Redux でフォームコンポーネントの CRUD をマスターする：サンプルコード付き

2024-05-27

React + Redux - フォームコンポーネントでの CRUD 処理の最適な方法

このブログ記事では、React + Redux を使用してフォームコンポーネントで CRUD 処理を効率的に行う方法について説明します。フォームコンポーネントは、ユーザー入力を収集し、アプリケーションの状態を更新するために不可欠な部分です。CRUD 操作 (Create、Read、Update、Delete) は、データベースとのやり取りを伴うため、適切な管理が必要です。

Redux を使用した CRUD 処理のメリット

Redux を使用すると、以下の利点を得ることができます。

データの一貫性: データは単一のストアに保存されるため、常に一貫した状態を維持できます。
再利用可能なロジック: CRUD 操作のロジックは、コンポーネント間で再利用できます。
テストの容易性: Redux はテストしやすい構造を提供するため、コードの品質を向上させることができます。

CRUD 操作の例

以下は、React + Redux で CRUD 操作を行うための一般的な例です。

作成 (Create)

ユーザーがフォームに入力し、送信ボタンをクリックします。
フォームコンポーネントは、入力されたデータを Redux アクションとしてディスパッチします。
Redux アクションは、API またはデータベースにデータを送信します。
データが成功裏に送信されると、Redux ストアの状態が更新されます。
フォームコンポーネントは、更新された状態を受け取り、フォームをリセットします。

読み取り (Read)

コンポーネントは、Redux ストアから必要なデータを取得します。
データは、コンポーネントの UI に表示されます。

更新 (Update)

削除 (Delete)

ユーザーは、削除したいアイテムを選択します。
コンポーネントは、Redux アクションとして削除リクエストをディスパッチします。
コンポーネントは、更新された状態を受け取り、UI から削除されたアイテムを更新します。

React + Redux を使用すると、フォームコンポーネントで CRUD 処理を効率的に行うことができます。Redux は、データの一貫性、再利用可能なロジック、テストの容易性などの利点を提供します。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createItem } from '../actions/itemActions';

class FormComponent extends Component {
  state = {
    name: '',
    description: '',
  };

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    const { name, description } = this.state;
    this.props.createItem({ name, description });
    this.setState({ name: '', description: '' });
  };

  render() {
    const { name, description } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label>名前:</label>
        <input type="text" name="name" value={name} onChange={this.handleChange} />
        <label>説明:</label>
        <textarea name="description" value={description} onChange={this.handleChange} />
        <button type="submit">作成</button>
      </form>
    );
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {
  createItem,
};

export default connect(mapStateToProps, mapDispatchToProps)(FormComponent);

アクション

import axios from 'axios';

export const createItem = (item) => ({
  type: 'CREATE_ITEM',
  payload: axios.post('/api/items', item),
});

リデューサー

const initialState = {
  items: [],
};

export default function itemReducer(state = initialState, action) {
  switch (action.type) {
    case 'CREATE_ITEM':
      return {
        ...state,
        items: [...state.items, action.payload],
      };
    default:
      return state;
  }
}

ストア

import { createStore } from 'redux';
import itemReducer from './reducers/itemReducer';

const store = createStore(itemReducer);

export default store;

アプリケーション

import React from 'react';
import { Provider } from 'react-redux';
import Store from './store';
import FormComponent from './components/FormComponent';

const App = () => (
  <Provider store={Store}>
    <FormComponent />
  </Provider>
);

export default App;