私は状況がある場合：コンポーネントは3操作（すべての情報||検索が必要な情報||フィルタ情報）を持っていますが、これらの操作はすべて同じAPIに依存します。Reduxアクションを設計する際に最も重要な考慮事項は何ですか？
Reduxアクションを設計する最良の方法は何ですか？ 3つの操作をマッピングしている3つのアクションを設計するには？ 1つのAPIだけで1つのアクションしかない場合
Reduxアクションを設計する際に最も重要な考慮事項は何ですか？
1つか2つか3つのアクションかどうかは、あなたのレデューサーの編成方法とUIがあなたの店舗にどのように接続されているかによって大きく異なります。
API呼び出しは、アクション自体の副作用ではなく、アクションそのものと考えるべきです。あなたのreduxストアはあなたのUIの特定の状態を保持しています：どのフィルタがアクティブですか？現在の検索クエリは何ですか？ ...
アクションを設計する際の最も重要な考慮点は、自分のUIの状態はどういう意味ですか？彼らはそれにどのような影響を与えていますか？彼らは私の店の状態にどのように関係していますか？
APIコールコードを相互に関係させることを心配している場合は、それを処理するさまざまなパターンがあります：パラメータを取る簡単なヘルパー関数を使用し、redux-sagaなどを使用して副作用などをトリガーします。 APIコールは、アクションを設計する際には関係がありません。
アクションがAPIエンドポイントにマップする必要があることを示すドキュメントはありません。したがって、APIエンドポイントの数を考える必要はありません。 http://redux.js.org/docs/basics/Actions.htmlから
：
アクションは、お店にご アプリケーションからデータを送信する情報のペイロードです。あなたのケースでは
ペイロードを持つつのアクションが結果を達成し、所望の状態にあなたのstateを変異させることができればしかし、私は3を使用する理由を参照してください（ひいては3つのレデューサー、などを持って）いません。
reduxのドキュメントには、非同期アクション/ APIの使用法がreduxアプリケーション内でどのように機能するかに関する良いセクションがあります。
http://redux.js.org/docs/advanced/AsyncActions.html
私はサンクミドルウェアを使用して、このパターンを踏襲し、そしてそれは本当にうまく動作することがわかってきました。アイデアは、あなたの行動に機能を返す能力を与えることです。
アクション：
/* Inside ./action.js */
/* This is the function you will dispatch from another component (say, a container component. This takes advantage of thunk middleware. */
export function fetchAllInfo() {
return function(dispatch) {
dispatch(requestAllInfo())
/* Import your API function, make sure it takes a callback as an argument */
API.fetchAllInfo((allinfo) => {
dispatch(receiveAllInfo(allinfo))
}
}
/* Pure action creators */
function requestAllInfo() {
return {
type: "REQUEST_ALL_INFO",
}
}
function receiveAllInfo(allinfo) {
return {
type: "RECEIVE_ALL_INFO",
allinfo,
}
}
減速：サンクミドルウェア（または非同期ディスパッチに対処するための独自の方法）と、各API呼び出しのコールバックを持つので
/* Inside ./reducer.js */
export function inforeducer(state, action) {
switch(action.type) {
case "REQUEST_ALL_INFO": {
return Object.assign({}, state, {
/* This can be passed as prop so a component knows to show a loader */
isFetching: true,
})
case "RECEIVE_ALL_INFO": {
return Object.assign({}, state, {
isFetching: false,
allInfo: action.allInfo,
})
}
default:
return state
}
}
、あなたこのメソッドを使用して、呼び出しの開始時と結果を受け取るときにAPI呼び出しをディスパッチすることができます。
ありがとう:)私は、私のシステムをより重視し、それをより良く構築することを理解しました。 – honoka