アクション作成者でコールバック関数が正しく実行されない

Question

私は、アプリケーション用に使用可能なストアを作成するために、SQLデータベースの複数の別々の部分から要素を引き出すダッシュボードを作成しています。コールは、前のコールのデータを使用して後続のコールで引き数として機能するため、順番に実行する必要があります（例：ユーザー名とパスワードが最初に挿入されます。

私はReduxを初めて（そして、このような非同期の約束事を連鎖させる）ことができます。私は、これを達成する最善の方法は、アクションクリエイターのさまざまな約束をつなぎ合わせることだと考えてきました。しかし、私は完全に説明できないいくつかの振る舞いをしています。

アクションの作成者は以下の通りです：

export function setReduxStore(username, password) { 
    return function (dispatch) { 
    return dispatch(
     loginUser(username, password) 
    ).then((customerId) => 
     setAvailableTargets(customerId) 
    ) 
    } 
} 

あなたは、アクションの作成者最初の火 'loginUserを（）' 見ることができるように。この部分は正しくトリガされます。ログインユーザのためのコードは以下の見つけることができます：

export function loginUser(username, password) { 
    return function (dispatch) { 
    return axios({ 
     method: 'POST', 
     url: 'http://localhost:3050/users/login', 
     data: { 
     username: username, 
     password: password 
     } 
    }).then((response) => { 
     dispatch({type: "LOGIN_USER", payload: response}) 
     return response.data.data[0].customer_id 
    }) 
    } 
} 

しかし、私は、利用可能な目標を設定するのに役立ち2番目のクエリをトリガすることを設定している「setReduxStore（）」アクションの作成者で。この呼び出しは、引数としてユーザーログインから返されたIDを受け入れます。このアクションのコードの下で：

export function setAvailableTargets(customer_id) { 
    return function (dispatch) { 
    console.log("set targets fired with customer Id " + customer_id) 
    return axios({ 
    method: 'GET', 
    url: 'http://localhost:3050/users/targets/' + customer_id, 
    data: { 
     customer_id: customer_id 
    } 
    }).then((response) => { 
    dispatch({type: 'SET_AVAILABLE_TARGETS', payload: response}) 
    return response.data.data[0].id 
    }) 
    } 
} 

あなたは、私がその関数内でコンソールログ文を持っていることに気づくでしょう - 私は

return function (dispatch) 

の上にそれを置くときは、提供された適切なIDで起動しますloginUserから。ただし、「リターン機能（ディスパッチ）」の下に何も発砲していません。私が約束チェーンの外でメソッドを呼び出すと、それは機能します。そのため、アクションを作成して実際には意味のあるコードを実行することはできません。

これが重要であるかどうかわかりませんが、これがわかれば、私はpromiseチェーンをさらに構築し、setAvailableTargets（）から返されたIDに基づいて実際のデータを取得する必要があります。

EDIT：同様の問題を持つ人のために、以下の答えは次のようになります機能のシーケンスに私を導く助け：

export function setReduxStore(username, password) { 
    return function (dispatch, getState) { 
    return dispatch(
     loginUser(username, password) 
    ).then(() => { 
     return dispatch (
     setAvailableTargets(getState().currentUser.customerId) 
     ) 
     }) 
    } 
} 

私は、関数の発射があったが、それは阻止された派遣されませんでした意味のあるコードを実行することはできません。私はバンドルされた機能の各具体的な段階で新しい発送を返すようにしなければならなかった。

Answer 1

上記のコメントから引き続き、プレーンなオブジェクトをアクションから戻す必要があります。あなたはreduxサンクミドルウェアを使用しているので、あなたはアクションとして関数を返すことができます。

export function setReduxStore(username, password) { 
    return function (dispatch) { 
    loginUser(username, password) 
     .then((customerId) => 
     dispatch(setAvailableTargets(customerId)) 
    ) 
    } 
} 

export function loginUser(username, password) { 
    return function (dispatch) { 
    axios({ 
     method: 'POST', 
     url: 'http://localhost:3050/users/login', 
     data: { 
     username: username, 
     password: password 
     } 
    }).then((response) => { 
     dispatch({type: "LOGIN_USER", payload: response}) 
     //return response.data.data[0].customer_id 
     // Get data from store instead 
    }) 
    } 
} 

export function setAvailableTargets(customer_id) { 
    return function (dispatch) { 
    console.log("set targets fired with customer Id " + customer_id) 
    axios({ 
     method: 'GET', 
     url: 'http://localhost:3050/users/targets/' + customer_id, 
     data: { 
     customer_id: customer_id 
     } 
    }).then((response) => { 
     dispatch({type: 'SET_AVAILABLE_TARGETS', payload: response}) 
     //return response.data.data[0].id 
     // Get data from store instead 
    }) 
    } 
} 

Reduxので非同期アクションと共通のパターンは、あなたのUIがロードアニメーション、エラーメッセージ、または応答データをレンダリングするかどうかを知っているように、「要求」、「成功」、「失敗」のアクションタイプを定義することです。

参照：http://redux.js.org/docs/advanced/AsyncActions.html