时间戳

首页 > 解决方案 > 如何使用 redux 执行 api 调用？

reactjs - 如何使用 redux 执行 api 调用？

问题描述

我最近在学习 react-redux。现在我对如何执行api call.

这是我的 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 });
    }
};

这是我的事件列表，这是我要调用 api 调用的地方

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

那么如何进行 api 调用呢？在我的里面componentDidMount

标签： reactjstypescriptreact-redux

解决方案

您缺少 mapDispatchToProps ，您使用的是空 {}。

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

推荐阅读