在Reactjs Redux Redux-thunk中进行依赖API调用的正确方式是使用异步action和thunk中间件。
// 异步action
export const fetchData = () => {
return (dispatch) => {
dispatch(fetchDataRequest()); // 发起请求前的同步action
fetch('https://api.example.com/data') // 调用API
.then(response => response.json())
.then(data => {
dispatch(fetchDataSuccess(data)); // 获取数据成功后的同步action
})
.catch(error => {
dispatch(fetchDataFailure(error)); // 获取数据失败后的同步action
});
};
};
// 同步action
export const fetchDataRequest = () => {
return {
type: 'FETCH_DATA_REQUEST'
};
};
export const fetchDataSuccess = (data) => {
return {
type: 'FETCH_DATA_SUCCESS',
payload: data
};
};
export const fetchDataFailure = (error) => {
return {
type: 'FETCH_DATA_FAILURE',
payload: error
};
};
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';
const MyComponent = ({ fetchData, data, loading, error }) => {
useEffect(() => {
fetchData(); // 组件挂载时调用异步action
}, []);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
{data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
};
const mapStateToProps = state => {
return {
data: state.data,
loading: state.loading,
error: state.error
};
};
export default connect(mapStateToProps, { fetchData })(MyComponent);
这样,当组件挂载时,异步action将被调用,发起API请求并更新Redux store中的状态。组件将根据状态渲染相应的内容。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云