私はAPIからいくつかのデータを取得し、それを私のアプリケーションに渡そうとしています。 React/Reduxの新機能ですが、これらの呼び出しをどこから行うのか、それを私のアプリケーションに渡す方法は不思議です。私は標準的なフォルダ構造（コンポーネント、レデューサー、コンテナなど）を持っていますが、私は現在API呼び出しをどこに置くべきかわかりません。React/ReduxアーキテクチャでAPIコールをどこに置くべきですか？
AJAXコールなどの動作は「副作用」と呼ばれ、一般的にコンポーネント、「サンク」アクションクリエイター、または「サガ」などの他の同様のRedux副作用アドオンに存在します。
詳しくは、Redux FAQのhttp://redux.js.org/docs/faq/Actions.html#actions-side-effectsを参照してください。
これを開始する最も簡単な方法は、サンクと呼ばれる関数を使用してredux-thunkというアクションを追加することです。あなたがやらなければならないことは、お店にサンクを追加されます。そして、APIを呼び出して、あなたの行動で関数作成
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
：
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
}
}
このアクションをディスパッチ/呼び出す方法？ – mattnedrich
を「魚の答えに男を教えます。」
これは、コールのタイプと状況によって異なります。
簡単なため一般があります。少なくともJSの新しいバージョンに入っているかもしれないasync/awaitについて、私たちがやりたいことを決めるまで。
これは最も重要な部分です！
ちょうど考慮に通常のドキュメント、で見つかったツールのあなたの特定のセットで使用されている一般的な「規則」を取ると、このようなことのために将来的には、「ベストプラクティス」をGoogleに必ずしてください。これは、あなたのプロジェクトに新しいことをやってもらうために役立ちます。あなたの新しいカスタムバージョンの学習を増やさずに飛び込むだけです。
単純なAPIコールであれば、componentdidmountのようなコンポーネントのライフサイクルメソッドに配置し、レスポンスを返すときにアクションをディスパッチすることはできますが、すぐにデバッグして維持するのは難しくなりますそのような場合には、ミドルウェアを使用する方が良いでしょう。最も人気が高いのはおそらく還元型サンクスか還元型サガです。私は個人的にはサガを好むでしょう – StackOverMySoul