レスキューアクションクリエイターをチェインする反応コンポーネント内のPromise.then（）反応コンポーネント

Question

私はreduxアクションクリエーターで非同期呼び出しと約束のためにAxiosを使用する予定です。現在、APIを使用することはできませんので、私は物事をローカルに保管しています。

反応成分の中から以下の連鎖を作ることができますか？

アクションクリエイター

export function fetchResultsIfNeeded() { 
    return (dispatch, getState) => { 
     if (true) { 
      return dispatch(fetchResults(day, hash)); 
     } 

     else {return Promise.resolve();} 
    }; 
} 

export function fetchResults(day, hash) { 
    return (dispatch) => { 
     // Dispatch something here 

     return new Promise(resolve => setTimeout(resolve, 1000)).then(() => { 
      // Do some stuff here 
      // Dispatch some other stuff here as well 
     }); // Want to chain on this promise in react component 
    }; 
} 

コンポーネント現在、以下のエラーを受け取る

import { fetchResultsIfNeeded } from 'actions'; 

// Class based react component 
checkResults(periodFrom, periodTo) { 
    this.props.fetchResultsIfNeeded([periodFrom, periodTo]).then(() => {/* Do some stuff here */}); 
} 

// Connected via react redux 
export default connect(null, { fetchResultsIfNeeded })(component); 

反応し、それがまだ反応し、Reduxのかそこらの上で待っていることをすることができますか？

Uncaught TypeError: Cannot read property 'then' of undefined 

私はあなたがredux-thunkを使用していると仮定し、

Full component code（そうでない場合は、完全なコードを表示する方法がわからない）ペンでFull action creator code

Answer 1

をアクションの作成者とコンポーネントを置きます。アクション作成者の中の解決機能から戻る必要があります。正しい流れは次のようになります。

export function fetchResults(day, hash) { 
 
    return (dispatch) => { 
 
     
 
     dispatch(...).then(
 
      () => { 
 
       // Do some stuff here 
 
       return dispatch(...) 
 
      } 
 
     )    
 
    } 
 
}

Answer 2

あり、これを行うために複数の方法がありますが、おそらく既存のコードでそれを行うための最も簡単な方法は、bindActionCreatorsを使用することです：

import { fetchResultsIfNeeded } from 'actions'; 
import { bindActionCreators } from 'redux'; 

// Class based react component 
checkResults(periodFrom, periodTo) { 
    this.props.fetchResultsIfNeeded([periodFrom, periodTo]).then(() => {/* Do some stuff here */}); 
} 

// Connected via react redux 
export default connect(
    null, 
    dispatch => ({ 
    ...bindActionCreators({ fetchResultsIfNeeded }, dispatch) 
    }) 
)(component);