ディスパッチがreactjsでreduxで定義されていません

Question

なぜテーブル行をクリックすると、未定義のディスパッチエラーが発生してUncaught TypeError: dispatch is not a functionになるのか知りたいのですが。私はこの問題を解決しようとしていますが、これまで成功していませんでした。

：私はストアオブジェクトは、デバッグコンソールに存在しているが、それはListingTableコンポーネントに渡されていないことがわかりました

ListingTable.js

import Table from 'grommet/components/Table'; 
import React from 'react'; 
import {remove, add} from '../action/ListAction'; 
import {connect} from 'react-redux' 

let createHandlers = function(dispatch) { 
    let onClick = function(item) { 
     dispatch(add(item)) <<== undefined!!!! 
    }; 
    return { 
     onClick 
    }; 
}; 
export class ListingTable extends React.Component { 

    constructor(props) { 
     super(props); 
     this.handlers = createHandlers(this.props.dispatch); 
    } 
    render() { 
     return <Table> 
       <tbody> 
       { 
        this.props.data.map((item, key)=> 
         (
          // Undefined Error!!!! 
          <tr onClick={()=> this.handlers.onClick(item)} key={key}> 

           <td>{item.user_name}</td> 
           <td>{item.name}</td> 
           <td>{item.url}</td> 
          </tr> 
         )) 
       } 
       </tbody> 
      </Table> 
    } 
} 

export default connect()(ListingTable) 

app.js

import { ListingTable } from './component/ListingTable'; 
import { Provider } from 'react-redux' 
import {createStore} from 'redux'; 
import reducer from '../reducer/ListingReducer' 

export default class Page extends React.Component { 
    render() { 
     <Provider store={createStore(reducer)}> 
     <ListingTable data={this.props.item}/> 
     </Provider> 
    } 
} 

Answer 1

接続されていないコンポーネントをインポートしていますt。

"./ 'からexport

class ListingTable extends React.Component { 

    constructor(props) { 
    super(props); 
    this.handlers = createHandlers(this.props.dispatch); 
    } 
    render() { 
    return <Table> 
      <tbody> 
      { 
       this.props.data.map((item, key)=> 
        (
         // Undefined Error!!!! 
         <tr onClick={()=> this.handlers.onClick(item)} key={key}> 

          <td>{item.user_name}</td> 
          <td>{item.name}</td> 
          <td>{item.url}</td> 
         </tr> 
        )) 
      } 
      </tbody> 
     </Table> 
    } 
} 

export default connect()(ListingTable) 

class ListingTable前app.js