通過發送到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

回答

相關問題