Redux connect chaining非同期アクション

Question

私は、redux、react-redux、およびredux-thunkを設定しようとしています。一般的にはうまくいくと思っていますが、複数の非同期アクションを一緒に連鎖させるときに、どのように見えるかについての質問があります。

具体的には、アクションを呼び出すことができる別のアクションによって、アクションが個別にまたは間接的に呼び出されるシナリオがあります。私の質問は、私が慣用的になりたい場合、selectItemはどのように書かなければならないのですか？

を

export function fetchByContext(contextId) { 
    return dispatch => { 
     _fetchByContext(messages => { 
      dispatch({ type: RECEIVE_MESSAGES, ... }); 
     }); 
    }; 
}; 

export function subscribeByContext(contextId) { 
    return dispatch => { 
     _subscribeByContext(messages => { 
      dispatch({ type: RECEIVE_MESSAGES, ... }); 
     }); 
    }; 
}; 

export function selectItem(contextId) { 
    return dispatch => { 
     subscribeByContext(contextId)(dispatch); 
     fetchByContext(contextId)(dispatch); 
    }; 
}; 

Answer 1

をaction.js Iキーが（ref）ことであると考えている：内側機能からの任意の戻り値はディスパッチ自体の戻り値として利用できるようになり

fetchByContext(),subscribeByContext()は約束を返すが、これらは直列に連鎖することもできるし、selectItem()から並行して実行することもできる。 _fetchByContext()も_subscribeByContext()もないリターンを想定してテストされていない実装では、約束は次のようになります。

export function fetchByContext(contextId) { 
    return dispatch => { 
     return new Promise((resolve, reject) => { 
      _fetchByContext(messages => { 
       dispatch({ type: RECEIVE_MESSAGES, ... }); 
       resolve(messages); 
      }); 
     }); 
    }; 
}; 

export function subscribeByContext(contextId) { 
    return dispatch => { 
     return new Promise((resolve, reject) => { 
      _subscribeByContext(messages => { 
       dispatch({ type: RECEIVE_MESSAGES, ... }); 
       resolve(messages); 
      }); 
     }); 
    }; 
}; 

export function selectItem(contextId) { 
    return dispatch => { 
     // CALL IN SERIES 
     return dispatch(subscribeByContext(contextId)) 
      .then(() => dispatch(fetchByContext(contextId))); 
     // CALL IN PARALLEL (alternative to the code above; this is probably not what you want - just keeping for reference) 
     return Promise.all(
      dispatch(subscribeByContext(contextId)), 
      dispatch(fetchByContext(contextId)) 
     ); 
    }; 
} 

は再びちょうど一般的な解決のためのアイデアを与えることを期待して、上記のコードがテストされますのでご注意ください。