react 用dispatch进行接口调用
时间: 2024-03-26 07:41:16 浏览: 17
在React中使用dispatch进行接口调用,通常需要借助redux-thunk中间件来处理异步操作。下面是一个简单的例子:
```javascript
// 定义一个异步action creator
export const fetchUserData = () => {
return async (dispatch, getState) => {
dispatch({ type: 'FETCH_USER_DATA_REQUEST' });
try {
const response = await fetch('/api/user');
const data = await response.json();
dispatch({ type: 'FETCH_USER_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_USER_DATA_FAILURE', payload: error });
}
};
}
// 在组件中使用dispatch调用异步action creator
import { connect } from 'react-redux';
import { fetchUserData } from './actions';
class UserPage extends React.Component {
componentDidMount() {
// 调用异步action creator
this.props.fetchUserData();
}
render() {
// 根据store中的状态渲染组件
const { isLoading, userData, error } = this.props;
if (isLoading) {
return <div>Loading...</div>;
} else if (error) {
return <div>Error: {error.message}</div>;
} else {
return (
<div>
<h1>{userData.name}</h1>
<p>{userData.bio}</p>
</div>
);
}
}
}
const mapStateToProps = state => ({
isLoading: state.isLoading,
userData: state.userData,
error: state.error,
});
const mapDispatchToProps = {
fetchUserData,
};
export default connect(mapStateToProps, mapDispatchToProps)(UserPage);
```
在上面的例子中,fetchUserData是一个异步action creator,它返回一个函数,这个函数接收两个参数:dispatch和getState。在函数内部,我们可以使用dispatch方法来分发多个同步action,以更新store中的状态。在组件中,我们通过connect函数将fetchUserData方法映射为props属性,然后在componentDidMount中调用该方法,以触发异步操作。当异步操作完成后,根据store中的状态渲染组件。