RedGiant RedGiant - 4 months ago 134
Javascript Question

Dispatch is not defined in refux with reactjs

I want to know why clicking on the table row would still give me undefined dispatch error which leads to

Uncaught TypeError: dispatch is not a function
. I have been following this post to try and fix the problem, but so far no success.

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


I saw that the store object is present in the debug console, but it isn't passed to the ListingTable component:

enter image description here

Answer

You are importing not connected component.

remove export before class ListingTable

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';