機能的な反応成分へのディスパッチの挿入方法は？

Question

コンポーネント内でアイテムがクリックされたときにアクションをディスパッチする必要があります。しかし、attendHandlerが解雇されたとき、私はdispatch is undefinedを得ています。コンポーネントへのディスパッチを正しく渡すにはどうすればよいですか？

これは私の行動です。私はサンクを使用しているので、実際にはディスパッチを返します。

export function attendEvent(token) { 
 
    const config = { 
 
    headers: { Authorization: token }, 
 
    }; 
 
    console.log(config); 
 
    return dispatch => axios.post('api/events', config) 
 
    .then((response) => { 
 
    dispatch({ type: 'ATTEND EVENT SUCCESSFUL', payload: response.data }); 
 
    }) 
 
    .catch((err) => { 
 
    dispatch({ type: 'ATTEND EVENT UNSUCCESSFUL', payload: 'Could not attend event' }); 
 
    }); 
 
}

これは参考のために必要とされる場合にはこれは、私の店で私のコンポーネント

import React from 'react'; 
 
    import { connect } from 'react-redux'; 
 
    import attendEvent from '../actions/eventActions'; 
 
    import check from '../assets/hatch_complete.svg'; 
 
    import crossout from '../assets/hatch_multiply.svg'; 
 
    
 
    const Event = (props) => { 
 
     const attendHandler = (e) => { 
 
     e.preventDefault(); 
 
     dispatch(attendEvent({ 
 
      token: window.localStorage.getItem('token'), 
 
     })); 
 
     }; 
 
     return (
 
     <div className="event"> 
 
      <section className="eventdescription"> 
 
      <p>{props.title}</p> 
 
      <p>{props.description}</p> 
 
      <p>{props.date}</p> 
 
      <p>{props.owner}</p> 
 
      <p>{props.attendees}</p> 
 
      <p>{props.capacity}</p> 
 
      <p>Attend/unattend</p> 
 
      </section> 
 
      <section className="attend"><img onClick={attendHandler}className="eventgraphic" src={check} alt="" /></section> 
 
      <section className="unattend"><img className="eventgraphic" src={crossout} alt="" /></section> 
 
     </div> 
 
    ); 
 
    }; 
 
    
 
    export default connect(state => ({ 
 
     events: state.event.events, 
 
    }))(Event);

です。私はmapDispatchToProps、おそらくそれは私の問題ではありません。

import { applyMiddleware, createStore } from 'redux'; 
 
import { createLogger } from 'redux-logger'; 
 
import thunk from 'redux-thunk'; 
 
import rootReducer from './reducers/index'; 
 

 
export default createStore(rootReducer, applyMiddleware(thunk, createLogger()));

Answer 1

で呼び出すことができます。

export default function attendEvent(token) { 
    const config = { 
    headers: { Authorization: token }, 
    }; 
    console.log(config); 
    return dispatch => axios.post('api/events', config) 
    .then((response) => { 
    dispatch({ type: 'ATTEND EVENT SUCCESSFUL', payload: response.data }); 
    }) 
    .catch((err) => { 
    dispatch({ type: 'ATTEND EVENT UNSUCCESSFUL', payload: 'Could not attend event' }); 
    }); 
} 


const Event = (props) => { 
     const attendHandler = (e) => { 
     e.preventDefault(); 
     props.dispatch(attendEvent({ 
      token: window.localStorage.getItem('token'), 
     })); 
     }; 
     return (
     <div className="event"> 
      <section className="eventdescription"> 
      <p>{props.title}</p> 
      <p>{props.description}</p> 
      <p>{props.date}</p> 
      <p>{props.owner}</p> 
      <p>{props.attendees}</p> 
      <p>{props.capacity}</p> 
      <p>Attend/unattend</p> 
      </section> 
      <section className="attend"><img onClick={attendHandler}className="eventgraphic" src={check} alt="" /></section> 
      <section className="unattend"><img className="eventgraphic" src={crossout} alt="" /></section> 
     </div> 
    ); 
    }; 

    export default connect(state => ({ 
     events: state.event.events, 
    }))(Event); 

Answer 2

dispatchあなたはdefaultとしてあなたの行動をエクスポートし、接続が小道具として派遣を提供してdispatch on propsを呼び出す必要が小道具として利用可能であるので、props.dispatch