Tinus Wagner Tinus Wagner -4 years ago 134
React JSX Question

Pass Dispatch to onClick Event Redux

I'm digging into my first react/redux application and I've been having quite a bit of trouble mapping my dispatch actions to onClick events in my components.

I've tried a couple of variations of trying to bind the onClick Event to the dispatch, but I always end up with either :

ReferenceError: onMovieClick is not defined


or alternatively when I do end up binding a function correctly I'll get an error related to
dispatch is not defined
.

My Goal
I'm trying to implement a filter(delete) from store function

actions/movieActions.js

import * as actionTypes from './actionTypes'

export const createMovie = (movie) => {
return {
type: actionTypes.CREATE_MOVIE,
movie
}
};

export const deleteMovie = (id) => {
console.log('action triggered. movie index:' + id)
return {
type: actionTypes.DELETE_MOVIE,
id
}
}


reducers/movieReducers.js

export default (state = [], action) => {
switch (action.type){
case 'CREATE_MOVIE':
return [
...state,
Object.assign({}, action.movie)
];
case 'DELETE_MOVIE':
return [
state.filter(({ id }) => id !== action.id)
]
default:
return state;
}
};


components/MovieList.js

import React from 'react'
import Slider from 'react-slick'
import { dispatch, connect } from 'react-redux'
import {Icon} from 'react-fa'
import { deleteMovie } from '../../actions/movieActions'

import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import './MovieList.scss'

class MovieList extends React.Component{
constructor(props){
super (props)
}

handleClick(id) {
dispatch(deleteMovie(id))
}

onMovieClick(id){
dispatch.deleteMovie(id)
}

render () {
// Settings for slick-carousel
let settings = {
infinite: true,
speed: 500
}

return (
<div className='col-lg-12'>
{this.props.movies.map((b, i) =>
<div key={i} className="col-lg-2">
<Slider {...settings}>
{b.images.map((b, z) =>
<div className="img-wrapper">
<Icon name="trash" className="trash-icon" onClick={() =>
console.log(this.props.movies[i].id),
onMovieClick(this.props.movies[i].id)
}/>
<img className="img-responsive" key={z} src={b.base64}></img>
</div>
)}
</Slider>
<div className="text-left info">
<h2>{b.title}</h2>
<p>{b.genre}</p>
</div>
</div>
)}
</div>
)
}
}

// map state from store to props

const mapStateToProps = (state) => {
return {
movies: state.movies
}
};

// Map actions to props
const mapDispatchToProps = (dispatch) => {
return {
onMovieClick: (id) => {
dispatch(deleteMovie(id))
}
}
}

export default connect(mapStateToProps, mapDispatchToProps)(MovieList)


Would love some advice if anyone has a moment.

Answer Source

Since you are passing onMovieClick through connect, you can actually invoke it from the MovieList component props. First, I would remove the onMovieClick method definition in your MovieList component and then use this.props.onMovieClick in the onclick handler of Icon like so:

<Icon name="trash" className="trash-icon" onClick={() =>
  console.log(this.props.movies[i].id),
  this.props.onMovieClick(this.props.movies[i].id)
}/>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download