ReduxとReactで非同期アクションを順番に実行する

Question

私のReact/Reduxアプリケーションでは、私はカスタムgroupオブジェクトを持っています。私は、現在選択されているグループ（リストの最初のグループにデフォルト設定されています）の詳細ビューの横に、すべてのグループの要約リストを表示するページを持っています。私はグループのリスト（/groups）を私の残りのAPIからリクエストし、最初のグループのid（店から？）を取得し、selected groupに設定し、getのメンバーのリストを返すように要求する必要があります。選択されたグループ（/groups/${id}/members）

私はReact/Reduxの新機能で、これをコーディングする方法についてはわかりません。これを3つの別々のアクションとして記述し、前のアクションの結果を使ってリアクションコンポーネントにこれらのアクションを呼び出させることはできますか？または、私はこれを行うために、サンク・ミドルウェアを使用する組み合わせアクション・ハンドラにロジックを配置する必要がありますか？そのようなアクションハンドラはどのように書くのですか？

Answer 1

おそらく3つのアクションを記述し、それらをサンクを使って連鎖させるのが最善でしょう。また、どのリクエストも非同期であるため、とにかくthunkやその他の非同期メソッドを使用する必要があります。 updateGroupsを置くために減速に応答データを送信する行為である

export const requestGroups =() => (
 
    (dispatch) => { 
 
    // Maybe dispatch an action here that says groups are loading, 
 
    // for showing a loading icon or something 
 
    return fetch('/groups').then((response) => (
 
     dispatch(updateGroups(response)) 
 
     // Or just dispatch({ type: 'UPDATE_GROUPS', groups: response }) 
 
    ) 
 
    } 
 
)

：だから/groupsと/groups/${id}/membersへの要求は、この（だけ簡潔にするために矢印関数）のようなものを探してサンクなりますそれを状態にする。そして、これらのサンクが約束を返すようにして、後で一緒に連鎖させることができます。おそらく、ここで何らかのエラー処理をしたいと思うでしょう。あなたはこれらの3つのアクションを持っていたら

はその後、あなたはそれらをすべて兼ね備えサンクを行うことができます。

export const initializeGroups =() => (
 
    (dispatch, getState) => (
 
    dispatch(loadGroups()).then(() => { 
 
     const { groups } = getState(); // Or wherever the list is 
 
     setSelectedGroup(groups[0]); 
 
     return getGroupData(groups[0]); 
 
    }).then(() => { 
 
     // Dispatch an action saying everything is done, or do any other stuff here. 
 
    }).catch((error) => { 
 
     // Do any error handling 
 
    }); 
 
) 
 
)