如何使用Redux DevTools的Dispatcher测试Axios发起的API请求

你尝试失败的核心原因是：你定义的getPlants是Redux Thunk风格的异步action creator，不是普通的纯对象action。Redux DevTools默认的Dispatcher面板仅支持派发纯对象类型的action，不存在你项目代码里的res、axios等上下文变量，也不支持在action中传入Promise这类非序列化值。

最优方案（二选一即可，按你的需求选择） #

方案1：手动构造同步action测试（最快捷，适合验证reducer逻辑） #

不需要调用接口，直接用接口返回的真实数据构造action即可：

1. 打开浏览器网络面板，找到历史请求中/api/plants接口的返回值，完整复制response数据
2. 在Redux DevTools的Dispatcher面板输入以下内容即可正常派发：

{
  type: 'GET_PLANTS',
  payload: /* 这里粘贴你刚才复制的接口返回数据 */
}

该方案完全符合Redux序列化要求，不会触发报错，可以直接验证reducer接收数据后的状态更新逻辑是否正常。

方案2：挂载方法到全局测试（适合验证完整接口请求+派发流程） #

如果需要测试从接口请求到action派发的完整流程，不需要写组件，只要把相关方法挂载到全局window对象即可：

1. 在你创建Redux store的代码中，把store实例挂载到全局：

// 你的store创建逻辑，比如用configureStore生成store
const store = configureStore({ reducer: rootReducer })
// 新增下面这行，测试完成后可以删除
window.store = store

2. 在你定义getPlants的代码文件中，把测试方法挂载到全局：

// 你的原有getPlants逻辑
export const getPlants = () => dispatch => { /* ... */ }
// 新增下面这行，测试完成后可以删除
window.testGetPlants = () => window.store.dispatch(getPlants())

3. 打开浏览器控制台，直接输入testGetPlants()回车即可自动执行接口请求、派发对应action，全程不需要调用组件逻辑。

你之前三次报错的原因说明 #

• 第一次res is not defined：DevTools的Dispatcher执行环境不存在你代码中axios回调里的res变量，无法识别
• 第二次axios is not defined：Dispatcher环境没有引入你项目内的axios依赖，无法调用
• 第三次非序列化报错：你把Promise对象直接传入了action的payload，Redux默认规范禁止action携带非序列化值，你认为不需要修改配置允许非序列化值的判断是完全正确的。

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