Higher-Order Components (HOC) を使用して Ajax リクエストを行う

Flux アプリにおける Ajax リクエストの適切な場所

コンポーネント内

コンポーネントは、ユーザーインターフェース (UI) の個々の部分を表します。Ajax リクエストは、コンポーネントの componentDidMount または componentWillReceiveProps ライフサイクルメソッド内で実行できます。

例

class MyComponent extends React.Component {
  componentDidMount() {
    // Ajax リクエストを実行
  }

  componentWillReceiveProps(nextProps) {
    // プロパティが変更されたら Ajax リクエストを実行
  }

  render() {
    // ...
  }
}

ストア内

ストアは、アプリケーションの状態を管理します。Ajax リクエストは、ストアの fetch または load メソッド内で実行できます。

class MyStore {
  fetch() {
    // Ajax リクエストを実行
  }

  load() {
    // Ajax リクエストを実行
  }
}

アクション内

アクションは、状態の変化を引き起こすイベントを表します。Ajax リクエストは、アクションの execute メソッド内で実行できます。

class MyAction {
  execute() {
    // Ajax リクエストを実行
  }
}

どの場所が適切か判断するには、以下の点を考慮する必要があります

• Ajax リクエストはどのイベントによってトリガーされるのか？
• Ajax リクエストはどの状態を更新するのか？
• Ajax リクエストはどのコンポーネントに関連しているか？

一般的なガイドライン

• ユーザーの操作によってトリガーされる Ajax リクエストは、アクション内で行う。
• アプリケーション全体の状態を更新する Ajax リクエストは、ストア内で行う。
• 特定のコンポーネントに関連する Ajax リクエストは、そのコンポーネント内で行う。

ReactJS-Flux での Ajax リクエストの例

以下は、ReactJS-Flux を使用して Ajax リクエストを行う例です。

class MyComponent extends React.Component {
  componentDidMount() {
    // Ajax リクエストを実行
    axios.get('https://api.example.com/data')
      .then((response) => {
        this.setState({ data: response.data });
      });
  }

  render() {
    // ...
  }
}

ストア内

class MyStore {
  fetch() {
    // Ajax リクエストを実行
    return axios.get('https://api.example.com/data');
  }
}

アクション内

class MyAction {
  execute() {
    // Ajax リクエストを実行
    axios.get('https://api.example.com/data')
      .then((response) => {
        // ストアを更新
        MyStore.dispatch('dataReceived', response.data);
      });
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import MyStore from './MyStore';
import MyAction from './MyAction';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: MyStore.getAll()
    };
  }

  componentDidMount() {
    MyStore.on('change', () => {
      this.setState({
        todos: MyStore.getAll()
      });
    });
  }

  render() {
    return (
      <div>
        <h1>Todo アプリケーション</h1>
        <ul>
          {this.state.todos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
        <input type="text" ref={(input) => this.input = input} />
        <button onClick={() => MyAction.addTodo(this.input.value)}>追加</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

MyStore.js

import Dispatcher from './Dispatcher';

class MyStore {
  constructor() {
    this.todos = [];
  }

  getAll() {
    return this.todos;
  }

  addTodo(text) {
    this.todos.push({
      id: Math.random().toString(36).substring(7),
      text: text
    });

    Dispatcher.dispatch('change');
  }
}

const myStore = new MyStore();

export default myStore;

MyAction.js

import Dispatcher from './Dispatcher';

class MyAction {
  addTodo(text) {
    Dispatcher.dispatch({
      type: 'ADD_TODO',
      text: text
    });
  }
}

const myAction = new MyAction();

export default myAction;

Dispatcher.js

const Dispatcher = {
  _listeners: [],

  register(callback) {
    this._listeners.push(callback);
  },

  dispatch(action) {
    this._listeners.forEach((callback) => {
      callback(action);
    });
  }
};

export default Dispatcher;

Ajax リクエストを行う他の方法

Higher-Order Components (HOC)

HOC は、コンポーネントに機能を追加するためのパターンです。Ajax リクエストを行う機能を HOC として作成することで、複数のコンポーネントで簡単に再利用できます。

const withAjax = (Component) => {
  return class WithAjax extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null
      };
    }

    componentDidMount() {
      // Ajax リクエストを実行
      axios.get('https://api.example.com/data')
        .then((response) => {
          this.setState({ data: response.data });
        });
    }

    render() {
      return (
        <Component data={this.state.data} {...this.props} />
      );
    }
  };
};

const MyComponent = ({ data }) => (
  <div>
    {data && data.map((item) => (
      <p key={item.id}>{item.text}</p>
    ))}
  </div>
);

const MyComponentWithAjax = withAjax(MyComponent);

GraphQL

GraphQL は、API をクエリするための言語です。GraphQL を使用することで、必要なデータのみを効率的に取得することができます。

import { ApolloClient, gql } from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql'
});

const query = gql`
  query {
    todos {
      id
      text
    }
  }
`;

client.query({ query }).then((response) => {
  // データを処理
});

Relay

Relay は、GraphQL と React を統合するためのフレームワークです。Relay を使用することで、コンポーネントとデータ間の関係を簡単に管理することができます。

import { createContainer } from 'relay-react';

const MyComponent = ({ data }) => (
  <div>
    {data && data.todos.map((item) => (
      <p key={item.id}>{item.text}</p>
    ))}
  </div>
);

const MyContainer = createContainer(MyComponent, {
  fragments: {
    viewer: () => gql`
      fragment on Viewer {
        todos {
          id
          text
        }
      }
    `
  }
});

export default MyContainer;

これらの方法は、それぞれ異なるメリットとデメリットがあります。どの方法を選択するかは、アプリケーションの要件によって異なります。