Redux：未定義のプロパティ 'then'を読み取ることができません

Question

mapDispatchToProps内でアクションを結合しようとしています。データを取得しようとした後、モーダルダイアログを起動しました。しかし、私は続ける未定義のプロパティ 'then'を読み取ることができませんエラー。

誰かが私に説明してもらえますか、私は何を間違っていますか？

mapDispatchToProps：

const mapDispatchToProps = dispatch => ({ 
    onClick: id => { 
    // console.log(fetchThing(id)) returns undefined 
    dispatch(fetchThing(id)).then(() => { 
     dispatch(showModal()) 
    }) 
    } 
}) 

Reduxのアクション：あなたはredux-thunkを使用していないのはなぜ

export const fetchThing =() => { 
    const request = axios.get(URL_API) 

    return dispatch => { 
    request.then(response => { 
     dispatch({ type: ACTION_FETCH, payload: response.data }) 
    }) 
    } 
} 

Answer 1

？それを使えば、そのようなあなたの行動を記述することができます。

export const fetchThing = dispatch => axios.get(URL_API) 
    .then(response => dispatch({ type: ACTION_FETCH, payload: response.data })) 

Redux thunkミドルウェアはあなたのためにすべてのものを行うだろうと、あなたは毎回あなたがmapDispatchToProps内で非同期のアクションを必要とすることを行う必要はありません。

Answer 2

mapDispatchToPropsに副作用があってはなりません。これは、名前が示唆しているようにして、犠牲にする行動をとらえなければならない。これは、次のようになります。あなたの（おそらく）ボタンで次に

const mapDispatchToProps = { 
    fetchThing: yourAction.fetchThing, 
    showModal: yourAction.showModal, 
}; 

export default connect(null, mapDispatchToProps)(YourComponent); 

：

<button type="button" onClick={this.handleClick} /> 

// this can be an asynchronous function, or you can just handle it in the action. 
handleClick = async id => { 
    await this.props.fetchThing(id); 
    this.props.showModal(); 
};