web-dev-qa-db-ja.com

React / ReduxアーキテクチャのどこにAPI呼び出しを配置し​​ますか？

APIからデータを取得して、アプリケーションに渡そうとしています。しかし、React/Reduxを初めて使用する場合、これらの呼び出しをどこから行うのか、どのようにアプリケーションに渡すのか疑問に思っています。標準のフォルダー構造（コンポーネント、レデューサー、コンテナーなど）がありますが、API呼び出しをどこに配置するかがわかりません。

reactjsreact-nativereduxreactjs-flux
14
Peter Zacharias

これを開始する最も簡単な方法は、サンクと呼ばれる関数を redux-thunk とともに使用して、アクションに追加することです。あなたがする必要があるのはあなたの店にサンクを追加することです：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

次に、APIを呼び出す関数をアクションに作成します。

export const getData() {
  (dispatch) => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(json => dispatch(resolvedGetData(json)))
  }
}

export const resolvedGetData(data) {
  return {
    type: 'RESOLVED_GET_DATA',
    data
  }
}
5
Nader Dabit

「男に魚の答えを教える」

これは、通話の種類と状況によって異なります。

  1. 一般に、単純な「取得」の場合、Nader Dabitが示しているように、アクションクリエーターに配置することで簡単に実行できます。
  2. それらをブロックに配置することを選択する多くの副作用管理ライブラリがあります（redux-sagas、axios呼び出し、redux-thunk）

今はredux-sagasを使っています。少なくとも、JSの新しいバージョンで提供される可能性のあるasync/awaitでyayまたはnayを決定するまでは。

これが最も重要な部分かもしれません！

ドキュメントに通常見られる特定のツールセットで使用される一般的な「規則」を必ず考慮に入れてくださいそして、このようなことについては、将来的に「ベストプラクティス」をグーグルで検索してください。 =これは、プロジェクトに不慣れな他の人が自分の方向性を理解し、新しいカスタマイズされたバージョンの学習を増やすことなくただ飛び込むのに役立ちます。

1
Urasquirrel

AJAX呼び出しなどの動作は「副作用」と呼ばれ、通常、コンポーネント、「サンク」アクションクリエーター、または「sagas」などの他の同様のRedux副作用アドオンのいずれかに存在します。

Reduxでこの回答を参照してくださいFAQ詳細 詳細 ：

0
markerikson