在redux-thunk中执行异步操作可以通过axios库来实现。redux-thunk是一个中间件,它允许我们在Redux中编写异步的action creator。下面是在redux-thunk axios异步中执行操作的步骤:
npm install redux-thunk axios
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
import axios from 'axios';
export const fetchData = () => {
return (dispatch) => {
dispatch(fetchDataRequest());
axios.get('https://api.example.com/data')
.then(response => {
const data = response.data;
dispatch(fetchDataSuccess(data));
})
.catch(error => {
dispatch(fetchDataFailure(error.message));
});
};
};
const fetchDataRequest = () => {
return {
type: 'FETCH_DATA_REQUEST'
};
};
const fetchDataSuccess = (data) => {
return {
type: 'FETCH_DATA_SUCCESS',
payload: data
};
};
const fetchDataFailure = (error) => {
return {
type: 'FETCH_DATA_FAILURE',
payload: error
};
};
在上面的代码中,fetchData函数是一个异步的action creator,它会发送一个GET请求到'https://api.example.com/data'来获取数据。根据请求的结果,它会分发不同的action来更新Redux的store。
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';
const MyComponent = ({ fetchData, data, isLoading, error }) => {
useEffect(() => {
fetchData();
}, []);
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
{/* Display the fetched data */}
</div>
);
};
const mapStateToProps = (state) => {
return {
data: state.data,
isLoading: state.isLoading,
error: state.error
};
};
export default connect(mapStateToProps, { fetchData })(MyComponent);
在上面的代码中,useEffect钩子函数用于在组件加载时调用fetchData函数。通过connect函数,将fetchData函数作为props传递给组件,并将Redux的state映射到组件的props中。
这样,当组件加载时,fetchData函数会被调用,然后异步地获取数据并更新Redux的store。组件会根据store中的状态来显示不同的内容,例如显示加载中的提示、错误信息或者显示获取到的数据。
这是在redux-thunk axios异步中执行操作的基本步骤。请注意,这只是一个示例,实际的代码可能会根据具体的需求和项目结构有所不同。
领取专属 10元无门槛券
手把手带您无忧上云