Question

我需要在组件中单击项目时调度操作。但是，当dispatch is undefined被解雇时，我收到attendHandler。如何正确地将调度传递给组件？

这是我的行动。我正在使用thunk，所以我实际上回复了一个调度。

＆＃13;

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

＆＃13;

这是我的组件

＆＃13;

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

＆＃13;

这是我的商店，以防需要参考。我不mapDispatchToProps，也许那是我的问题。

＆＃13;

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()));

＆＃13;

Answer 1

dispatch可用作道具，因此可以使用props.dispatch

进行调用

Answer 2

您需要将您的操作导出为default，然后调用dispatch on props，因为connect提供调度作为道具。

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

如何将调度注入功能React组件？

2 个答案: