디스패치가 reactjs와 함께 redux에 정의되지 않았습니다

Question

왜 테이블 행을 클릭하면 Uncaught TypeError: dispatch is not a function으로 이어지는 정의되지 않은 디스패치 오류가 발생하는지 알고 싶습니다. 나는이 문제를 해결하기 위해이 post을 따라 왔지만 지금까지 성공하지 못했습니다.

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) 

내가 저장소 개체가 디버그 콘솔에 존재하는 것을보고

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> 
    } 
} 

app.js하지만이 ListingTable 구성 요소에 전달되지 않습니다 :

Answer 1

연결되지 않은 구성 요소를 가져오고 있습니다. 티.

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) 

부터 수입 {ListingTable}`동안 기본 내보내기에에서 './' '수입 값

import ListingTable from './component/ListingTable';