为了为两个redux操作创建异步/等待结构,可以使用redux-thunk中间件。redux-thunk允许我们在action创建函数中返回一个函数而不是一个普通的action对象。这个返回的函数可以接收dispatch和getState作为参数,并且可以在其中进行异步操作。
下面是一个示例代码,展示了如何使用redux-thunk来创建异步/等待结构:
npm install redux-thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
export const fetchData = () => {
return (dispatch, getState) => {
// 可以在这里执行异步操作,比如发送网络请求
dispatch({ type: 'FETCH_DATA_REQUEST' });
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 异步操作完成后,使用dispatch分发相应的action
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
});
};
};
在上面的示例中,fetchData是一个异步的action创建函数。它返回一个函数,这个函数接收dispatch和getState作为参数。在这个函数中,我们可以执行异步操作,比如发送网络请求。在异步操作完成后,我们使用dispatch来分发相应的action,以更新Redux store中的状态。
通过使用redux-thunk中间件,我们可以轻松地创建具有异步/等待结构的redux操作。这样,我们就可以在Redux应用中处理异步操作,比如发送网络请求,并在操作完成后更新应用的状态。
领取专属 10元无门槛券
手把手带您无忧上云