redux-thunkで `bindActionCreators`を行う方法

Question

私はJavaScriptと反応ネイティブの方が新しく、既存のプロジェクトには機能を追加する必要があります。 APIリクエストを送信するには、reduxとredux-thunkとredux-sagaを使用しています。現在のところ、コンポーネントごとに1つだけのdispatch関数をサポートし、私はdispatchサガへのいくつかのタイプの要求が必要です。私は店にdispatchを追加するbindActionCreatorsにしようとしていますが、無駄に..私は完全にmapDispatchToProps部分に失われ、どのように私はその後、「アクションを発射する」んています。..

を小道具に単一のディスパッチで、私がやりましたこの：

let sdtp = (arg) => { 
    return (dispatch) => { 
    dispatch({ 
     type: 'GET_TEST_HASHMAP_SAGA', 
     hashmap: arg 
    }) 
    } 
} 

export default MainPage = connect(
    mapStateToProps, 
    { sdtp } 
)(MainPage); 

と私は（これは正しい用語であり、少なくとも私のサガが呼び出される？）「機能にアクセスする」ことができMainPage.render()コンポーネント内：

`this.props.sdtp({'hello':'world'});` 

が、私はを使用するように変更、私はここに（私はほとんどあきらめて非常に多くの異なる実験を試してみました）もう小道具に

にそれにアクセスすることはできません私は複数の派遣を構築する方法である：

let action1 = (args) => { 
    return (dispatch) => { 
     dispatch({ 
     type: 'GET_TEST_HASHMAP_SAGA', 
     hashmap: arg 
     }); 
    } 
} 

let action2 = (args) => { 
    return (dispatch) => { 
     dispatch({ 
     type: 'GET_TEST_HASHMAP_SAGA2', 
     params: arg 
     }); 
    } 
} 

let action3 = (args) => { 
    return (dispatch) => { 
     dispatch({ 
     type: 'GET_TEST_HASHMAP_SAGA3', 
     args: arg 
     }); 
    } 
} 

let mdtp = (dispatch) => { 
    return { 
    actions: bindActionCreators(action1, action2, action3, dispatch) 
    } 
} 

export default MainPage = connect(
    mapStateToProps, 
     { mdtp } 
)(MainPage); 

私はactionsにアクセスしようとしていますこのように：事前に

this.props.mdtp.action1({arg: 'hello'});

ありがとう！

Answer 1

connectは4つの議論をとります...ほとんどの人は通常最初の2つしか必要としません。

mapStateToProps私はそれが関数だと仮定しています。

mapDispatchToProps ...問題があります。

bindActionCreators is nothing but a for loop ...何が起こっているのかをよく理解してください。構文は次のようになり

function mapDispatchToProps(dispatch) { 
    return { 
    action1: (args) => dispatch(action1(args)), 
    action2: (args) => dispatch(action2(args)), 
    } 
} 

export default MainPageContainer = connect(
    mapStateToProps, mapDispatchToProps 
)(MainPage) 

をと過大評価bindActionCreatorsを使用して、あなたが主張する場合 this.props.action1(args)と

this.props.action2(args)としてそれらを呼び出す：

これを試してみてください。また

function mapDispathToProps(dispatch){ 
    return { 
    actions: bindActionCreators({ 
     action1,  
     action2, 
    }, dispatch) 
    } 
} 

を、constを使用しますletの代わりに...あなたは値を再定義していません。また、接続されたコンポーネントをコンポーネントのクラス名とは異なる名前でエクスポートすることも最善です。

Answer 2

mpdt関数では、アクションキーを持つオブジェクトではなく、bindActionCreatorsコールの結果を返す必要があります。

だから、それは

const mdtp = (dispatch) => { 
    return bindActionCreators({ 
    action1, action2, action3 
    }, dispatch); 
}; 

であるべきで、あなたがコンポーネントにアクションクリエイターを渡すの2つの方法が混同していることを、あなたのコードからthis.props.action1(...)

それも思えるようにそれらを呼び出すことができます。上記の1つの方法について説明します。そして、もう一つの方法は、あなたが同じ結果になりますので、

export default MainPage = connect(
    mapStateToProps, 
    { action1, action2, action3 } 
)(MainPage); 

のように、オブジェクトの表記法を使用してconnect()に直接あなたの行動のクリエイターを渡すことができます。そして、あなたの最初のアプローチでは、sdtpアクションクリエイターがこのアプローチを使用します。

Answer 3

また、あなたもあなたのrender()関数内で完全にmapDispatchToProps ...

をスキップすることができ、あなたはこのように直接dispatchを呼び出すことができます。そして、

this.props.dispatch({type: 'GET_TEST_HASHMAP_SAGA2', params: {"hello": "world"}});

をごconnect機能で、あなたはスキップすることができます完全にmapDispatchToPropsのparam。

export default MainPage = connect(
    mapStateToProps 
)(MainPage); 

私はこれが答えではないですけど、これは同様に

説明のため