単一のコンポーネント内の複数のactionCreators

Question

複数のactionCreatorsを1つのコンポーネントにディスパッチする必要があります。

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources), 
    ResourcesState.actionCreators// i have another actionCreator I want to add 
)(Home) as typeof Home; 

ただし、actionCreatorsでこれを行うための構文は不明です。私は

mapDispatchToProps

しかし、実装する方法がわからないに読みました。

Answer 1

mapDispatchToPropsは、connectの2番目の引数です。だから、例えば：

import customAction from 'actions-directory-in-your-app' 

const mapStateToProps =() => {} // no implementing anything for example purposes 
const mapDispatchToProps =() => ({ customAction }) 

const ConnectedContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(YourContainer) 

customActionので、あなたがそれをあなたのコンポーネント内で他の小道具と同じ方法を使用することができ、今YourContainerで小道具になります。

Answer 2

接続するための第2引数はobjectまたはfunctioを取るのnので、あなたはまた、アクションクリエイター

Why is there no need for a mapDispatchToProps function here?

を使用する方法の詳細については、StackOverflowの上でこの答えを読ん

export default connect(
    (state: ApplicationState) => Object.assign({}, state.search, state.resources), 

    { 
     ResourcesState.actionCreators, 
     some_other_action_creators, 
     some_more 
    } 
)(Home) as typeof Home; 

を追加することができます

Answer 3

ReactコンポーネントのReduxアクションのディスパッチを設定するには、いくつかの方法があります。

1. connect(mapState)(MyComponent)を使用してください。既定では、コンポーネントにはprops.dispatchが割り当てられ、props.dispatch({type : "SOME_ACTION"})には呼び出すことができます。

2. connectの2番目の引数としてmapDispatchToProps関数を渡します。内部に、あなたはdispatchを呼び出す新しい関数の参照を作成することができます

   あなたはまた、代わりにReduxのbindActionCreatorsユーティリティを使用することができます

   function mapDispatchToProps(dispatch) { 
       return { 
        addTodo : (text) => dispatch({type : "ADD_TODO", text}) 
       } 
   } 
   

3. ：

   function mapDispatchToProps(dispatch) { 
       return bindActionCreators({addTodo, toggleTodo}, dispatch); 
   } 
   

4. 最後に、あなたが直接アクションクリエイターの完全なオブジェクトを渡すことができますがconnectへ：

   const actions = {addTodo, toggleTodo}; 
   export default connect(mapState, actions)(MyComponent); 
   

私はブログの記事Idiomatic Redux: Why Use Action Creators?でお話している4番目の方法を強くお勧めします。

Answer 4

connectの2番目の引数はオブジェクトを取得するため、ES6構文を使用してmapDispatchToPropsの使用を避けることができます。

import { yourAction } from './your_actions_folder' 
class Home extends Component{ 
.... 
//For dispatch a action you only call the action Creator 
this.props.yourAction() 
} 
export default connect(mapStateToProps,{yourAction})(Home)