reactjs - Hur man utför ett API-anrop med redux?

Jag lär mig nyligen om react-redux. Nu är jag lite fast om hur jag kan utföra api-anropet.

Här är min action.ts

export const fetchEvent = () => async (
    dispatch: Dispatch
) => {
    dispatch({ type: ActionTypes.FETCH_EVENT_REQUEST });

    try {
        const response = await axios.get<EvenData[]>(
            `https://jsonplaceholder.typicode.com/todos/`
        );
        dispatch<FetchEventAction>({
            type: ActionTypes.FETCH_EVENT_SUCCESS,
            payload: response.data
        });

    } catch (error) {
        dispatch({ type: ActionTypes.FETCH_EVENT_FAILURE, error });
    }
};

och här är min evenemangslista och här är där jag vill göra API-anropet

const mapStateToProps = (state: ActionTypes) => ({});
const dispatchProps = {};

type Props = ReturnType<typeof mapStateToProps> & typeof dispatchProps;

type State = {};

class EventList extends React.Component<Props, State> {
    componentDidMount() {
        // dispatch(fetchEvent());
    }

    render() {
        return (
            <section>
                <p>{ }</p>
            </section>
        );

    }
}

export default connect(
    mapStateToProps,
    dispatchProps
)(EventList);

Så hur kan jag göra API-anropet? Inuti min componentDidMount

Svar #1

du saknar mapDispatchToProps, den du använder är tom {}.

import {fetchEvent} from 'action.ts' // change to correct path

const mapStateToProps = (state: ActionTypes) => ({});
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    fetchEvent: () => {
      dispatch(fetchEvent())
    }
  };
};

type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;

type State = {};

class EventList extends React.Component<Props, State> {
    componentDidMount() {
        this.props.fetchEvent()
    }

    render() {
        return (
            <section>
                <p>{ }</p>
            </section>
        );

    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(EventList);