Redux中useReducer配合mapDispatchToProps不生效无请求问题排查

问题根因 #

你当前的问题核心是调用了未被Redux处理的原始thunk函数，而非connect注入到组件props中的封装版本。
你定义的fetchData是Redux Thunk格式的Action Creator，它本身只会返回一个接收dispatch作为参数的函数，必须经过Redux的dispatch调用，才会被Thunk中间件识别并执行内部的请求逻辑。

现在你的代码存在两个关联问题：

1. SearchField组件没有声明接收props参数，导致connect通过mapDispatchToProps注入到props中的fetchData方法根本没有被组件拿到
2. onFormSubmit中直接调用了import引入的原始fetchData函数，自然不会触发任何请求，也不会抛出错误

修复方案 #

修改SearchField组件的定义，从props中取出注入的fetchData使用即可：

// 组件新增props参数
const SearchField = (props) => {
    const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
    const { cityField, countryField } = state;
    // 从props中取出connect注入的fetchData
    const { fetchData } = props;

    const onFormSubmit = e => {
        e.preventDefault()
        cityField.length < 1 ?
          alert('Please insert a city')
        :
        // 现在调用的是props中封装好的方法，会自动dispatch
        fetchData(cityField, countryField);
    }
    // 其余渲染逻辑保持不变
}

修改完成后提交表单即可正常触发请求。

可选优化 #

你当前在组件内用useReducer维护搜索字段，同时Redux中也定义了对应的search-field reducer，属于状态重复维护。你也可以选择直接把字段存在Redux里，组件通过connect取字段、dispatch修改字段的action，去掉组件内的useReducer逻辑，进一步简化代码。

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