react Promise dispatch

### 如何在React中使用Promise进行dispatch操作 为了处理异步动作，通常会结合`redux-thunk`中间件来允许action creator返回一个函数而不是普通的对象。这样可以在其中执行异步逻辑并最终分发同步的动作给store。 当涉及到Promises时，可以通过让action creator返回一个Promise，从而使得调用者能够监听该Promise的状态变化，并据此采取进一步行动。下面是一个简单的例子展示如何实现这一点： ```javascript // 定义异步Action Creator const fetchUserData = (id) => { return async (dispatch) => { try { dispatch({ type: 'FETCH_USER_REQUEST' }); const response = await axios.get(`/api/users/${id}`); dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data, }); // 返回成功状态以便外部可以捕获 return Promise.resolve(response.data); } catch (error) { dispatch({ type: 'FETCH_USER_FAILURE', error: true, payload: error.message || "Something went wrong", }); // 如果发生错误，则拒绝Promise return Promise.reject(error); } }; }; ``` 上述代码展示了如何创建一个名为`fetchUserData`的异步action creator，它接受用户ID作为参数，并尝试获取对应的数据。如果请求成功完成，那么将会触发成功的action并将数据传递进去；如果有任何异常抛出，则会触发失败的action并且拒绝Promise[^1]。 对于取消正在进行的操作，如网络请求，可以利用浏览器原生支持的`AbortController`接口配合fetch API一起工作。这里给出一段修改后的版本用于说明如何集成此功能： ```javascript import { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; function MyComponent() { const dispatch = useDispatch(); const [controller, setController] = useState(new AbortController()); useEffect(() => { let isMounted = true; function fetchData() { dispatch(fetchUserDataWithCancellation(controller.signal)) .then((data) => { if (!isMounted) return; console.log('Data fetched:', data); }) .catch((err) => { if (!isMounted) return; if (err.name === 'CanceledError') { console.warn('Request was canceled'); } else { console.error(err); } }); return () => { controller.abort(); // 组件卸载前取消未完成的任务 isMounted = false; }; } fetchData(); return () => {}; }, []); return ( <> {/* Component JSX */} </> ); } export default MyComponent; ``` 在这个改进的例子中，每当组件被挂载时都会发起一次新的API请求，并且会在组件即将销毁之前自动取消这些请求以防止内存泄漏或其他不必要的副作用。通过这种方式，即使页面导航离开了当前视图，也不会有悬而未决的HTTP连接占用资源[^2]。