通过发送到onClick事件Redux

我正在深入到我的第一个react/redux应用程序，我一直在将我的分派操作映射到组件中的onClick事件时遇到了一些麻烦。通过发送到onClick事件Redux

我试过一对夫妇试图onclick事件绑定到调度的变化，但我总是最后两种：

ReferenceError: onMovieClick is not defined

或当我结束了绑定功能正确我会得到一个有关dispatch is not defined的错误。

我的目标 我试图实现从存储功能的过滤器（删除）

动作/ 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 
    } 
}

减速器/ 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; 
    } 
};

组件/ 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)

也许需要一些意见，如果任何人有一个时刻。

来源

2017-06-14 Tinus Wagner

你在道具onMovieClick'，一个'重复定义和MovieList –

既然您通过连接传递了MovieMovieClick，您实际上可以从MovieList组件道具中调用它。首先，我会删除onMovieClick方法定义你的MovieList组件，然后使用this.props.onMovieClick在Icon onclick句柄，像这样：

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

来源

2017-06-14 07:13:20

的方法中的一个令人尴尬地接近正确的答案。谢谢你的帮助。 –

通过发送到onClick事件Redux

回答

相关问题