在Redux操作调度调用中返回Promise以便可以链接.then块,可以通过使用中间件来实现。Redux中间件是一个函数,它可以在action被发起之后,到达reducer之前进行拦截和处理。
要在Redux操作调度调用中返回Promise,可以使用redux-thunk中间件。redux-thunk允许我们在action创建函数中返回一个函数而不是一个普通的action对象。这个返回的函数可以接收dispatch和getState作为参数,并且可以在内部进行异步操作。
以下是实现的步骤:
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) => {
return new Promise((resolve, reject) => {
// 异步操作,例如发起网络请求
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 在异步操作完成后,可以dispatch一个普通的action对象
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
resolve(data); // 可选,如果需要在调用处使用.then块
})
.catch(error => {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
reject(error); // 可选,如果需要在调用处使用.catch块
});
});
};
};
在上述代码中,fetchData是一个异步的action创建函数,它返回一个函数。这个返回的函数接收dispatch和getState作为参数,可以在内部进行异步操作。在异步操作完成后,可以dispatch一个普通的action对象来更新Redux的状态。
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchData } from './actions';
const MyComponent = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchData())
.then(data => {
// 处理异步操作成功的情况
console.log(data);
})
.catch(error => {
// 处理异步操作失败的情况
console.error(error);
});
}, []);
return (
// 组件的JSX代码
);
};
export default MyComponent;
在上述代码中,我们使用了React Redux的useDispatch钩子来获取dispatch函数,并在组件的useEffect钩子中调用异步的action创建函数fetchData。通过使用.then块和.catch块,我们可以处理异步操作成功和失败的情况。
这样,我们就可以在Redux操作调度调用中返回Promise,并且可以使用.then块和.catch块来处理异步操作的结果。
没有搜到相关的沙龙