我最近在学习react-redux。现在我有点困惑如何执行 api 调用
。
这是我的操作.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
最佳答案
您缺少 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);
关于reactjs - 如何使用redux执行api调用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67759441/