如何使用Redux Thunk组合两个依赖的Redux中间件操作？

你完全可以用Redux Thunk来实现这个需求，根本不需要对比前后状态——因为Thunk支持在异步action中返回值，你可以直接拿到第一个操作生成的ID，再传给第二个操作。

具体实现步骤如下：

1. 拆分基础Thunk函数
   先把两个独立的操作写成单独的Thunk，其中创建资产的Thunk要返回后端生成的ID：

   // 创建资产的Thunk：调用后端接口，更新状态后返回资产ID
   const createAsset = () => async (dispatch) => {
     const apiResponse = await fetch('/api/assets', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ /* 资产基础信息 */ })
     });
     const newAsset = await apiResponse.json();
     // 更新Redux状态
     dispatch({
       type: 'CREATE_ASSET_SUCCESS',
       payload: newAsset
     });
     // 关键：返回后端生成的ID
     return newAsset.id;
   };
   
   // 上传资产数据的Thunk：接收资产ID作为参数
   const uploadAssetData = (assetId, fileData) => async (dispatch) => {
     await fetch(`/api/assets/${assetId}/upload`, {
       method: 'POST',
       body: fileData
     });
     dispatch({ type: 'UPLOAD_ASSET_DATA_SUCCESS' });
   };
   

2. 组合成一个Thunk
   写一个顶层Thunk，依次调用这两个操作，利用await获取第一个Thunk返回的ID：

   // 组合操作的Thunk：对外暴露的统一接口
   const createAssetWithUpload = (uploadData) => async (dispatch) => {
     try {
       // 先执行创建资产，拿到ID
       const assetId = await dispatch(createAsset());
       // 再用这个ID执行上传操作
       await dispatch(uploadAssetData(assetId, uploadData));
     } catch (err) {
       // 统一处理两个步骤中的错误
       dispatch({
         type: 'ASSET_OPERATION_FAILED',
         payload: err.message
       });
     }
   };
   

3. 使用方式
   在组件里直接dispatch这个组合后的Thunk即可：

   // 组件中调用
   dispatch(createAssetWithUpload(yourUploadFile));
   

核心原理 #

Thunk中间件允许你写的异步action函数（就是那些返回函数的action）返回任意值，当你dispatch这个Thunk时，dispatch的返回值就是Thunk函数最终return的内容。所以这里我们让createAsset返回资产ID，就能直接在组合Thunk中拿到，完全不需要去读取或对比Redux状态。

如果用Redux Toolkit的话，写法会更简洁（比如用createAsyncThunk），但核心逻辑是一致的——利用Thunk的返回值传递依赖数据，而非依赖状态读取。

内容的提问来源于stack exchange，提问作者micahg