functionコンポーネントにpropとして渡されたclickHandlerからreduxアクションを呼び出す方法は？

Question

機能コンポーネントにpropsとして渡されるonClickHandler関数からreduxアクションを呼び出そうとしていますが、何も起こりません。

子コンポーネントの小道具としてclickHandlerを渡しています。子コンポーネントとしてParentComponentで処理することは機能コンポーネントです。 parentComponentにため

コード

import React, { Component } from 'react'; 
import { connect,store } from 'react-redux'; 
// import statement for component 
// import statement for redux actions 

class ParentComponent extends Component { 
    constructor(props){ 
    super(props); 
    this.clickHandler = this.clickHandler.bind(this); 
    } 

    clickHandler(data){ 
    // call this.props.actions(data) here; 
    } 

    renderList(){ 
     return <ChildComponent 
      key={field.name} 
      clickHandler={() => this.clickHandler(field.name)} 
      /> 
    }) 
    } 

    render() { 
    return (
     <div className=""> 
     {this.renderList()} 
     </div> 
    ); 
    } 
} 

export default connect(null, { 
    actions 
})(ParentComponent); 

ChildComponentのコード

const ChildComponent = (props) => { 
    return( 
    <span onClick={props.clickHandler} className="glyphicon glyphicon-sort"></span> 
) 
} 

Answer 1

子コンポーネントと子コンポーネントのonClickに小道具を渡す方が良いでしょうが、に引数を渡します関数

親コンポーネントの返信用

import React, { Component } from 'react'; 
import { connect,store } from 'react-redux'; 
// import statement for component 
// import statement for redux actions 

class ParentComponent extends Component { 
    constructor(props){ 
    super(props); 
    this.clickHandler = this.clickHandler.bind(this); 
    } 

    clickHandler(data){ 
    // call this.props.actions(data) here; 
    } 

    renderList(){ 
     return <ChildComponent 
      key={field.name} 
      name={field.name} 
      clickHandler={this.clickHandler} 
      /> 
    }) 
    } 

    render() { 
    return (
     <div className=""> 
     {this.renderList()} 
     </div> 
    ); 
    } 
} 

export default connect(null, { 
    actions 
})(ParentComponent); 

子コンポーネント

const ChildComponent = (props) => { 
    return( 
    <span onClick={()=> props.clickHandler(props.name)} className="glyphicon glyphicon-sort"></span> 
) 
}