React结合Redux与Axios时Action内dispatch无法执行问题求助

核心认知偏差 #

当前的逻辑卡点本质是对redux-thunk的工作机制、React-Redux的connect绑定规则存在理解错位，具体两个核心错误点：

• 异步Action的返回结构不符合thunk的识别规范，导致dispatch永远无法被触发
• Calendar函数组件的参数取值、connect配置方式存在语法错误，导致action调用链路从入口就断了

逐模块修复说明 #

1. 异步Action 修正 #

redux-thunk的核心拦截规则是：只有action creator直接返回的函数，才会被thunk捕获并注入dispatch参数。
原代码的问题是把接收dispatch的函数写在了Axios请求的.then回调里，作为promise链的返回值存在——这个函数没有任何上层逻辑会主动调用它，所以里面的console.log和dispatch永远不会执行。
正确写法如下：

// 首先补充缺失的依赖导入
import axios from 'axios';
import { FETCH_AVAILABLE_DATES } from './types';

export const fetchAvailableDates = (appointmentKey) => {
    // 把整个异步逻辑包裹在外层返回的、接收dispatch参数的函数里，这是thunk唯一能识别的格式
    return (dispatch) => {
        axios.post('/app_dev.php/termin/getavailability/new', {
            appointmentKey: appointmentKey
        }).then((response) => {
            console.log('response received...');
            // 请求成功后直接调用dispatch传入普通action，不要在回调里return函数
            dispatch({
                type: FETCH_AVAILABLE_DATES,
                availableDates: response.data.availability
            });
        }).catch(err => {
            console.log(err);
        });
    }
}

2. Calendar组件修正 #

原组件写法存在三处语法逻辑错误：

• 函数组件的参数签名错误：const Calendar = (props, appointmentKey) => {} 这种写法里，appointmentKey是拿不到值的——React函数组件只会把第一个参数作为props对象传入，第二个参数没有任何实际意义
• mapStateToProps定义在组件函数内部：这个配置需要作为connect方法的参数，在组件导出时传入，写在组件内部不会被connect逻辑识别，相当于映射规则完全失效
• useEffect中直接调用了从actions文件导入的原始fetchAvailableDates，而不是props里被connect绑定了dispatch的版本：原始版本调用后返回的thunk函数没有执行入口，哪怕action逻辑写对了也无法触发dispatch

正确写法如下：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchAvailableDates } from "../actions";

// mapStateToProps 必须定义在组件外部，作为connect的入参传入
const mapStateToProps = (state) => {
    return {
        availableDates: state.availableDates
    }
}

const Calendar = (props) => {
    // 所有依赖的方法、属性统一从props中解构获取
    const { fetchAvailableDates, appointmentKey } = props;

    useEffect(() => {
        // 调用props中绑定了dispatch逻辑的action方法
        fetchAvailableDates(appointmentKey);
    }, [fetchAvailableDates, appointmentKey]);
}

// 在组件导出时传入connect配置，完成状态映射和action绑定
export default connect(mapStateToProps, { fetchAvailableDates })(Calendar);

补充：appointmentKey需要在父组件渲染Calendar时通过props传入，例如<Calendar appointmentKey="xxx" />，不要通过组件函数的第二个参数取值。

3. 现有配置核对 #

你写的combineReducer配置、单reducer逻辑、入口store的thunk中间件配置都是正确的，不需要修改——只要前面两个模块的逻辑修正，从action发起、中间件拦截到状态更新的全链路就能正常跑通。

修复后的完整协作链路 #

• 组件挂载时触发useEffect，调用props中绑定了dispatch的fetchAvailableDates
• action creator执行后返回一个接收dispatch的函数，被redux-thunk中间件捕获
• thunk自动把store的dispatch方法作为参数传入这个函数并执行
• 函数内部发起Axios POST请求
• 请求拿到响应后，直接dispatch带有FETCH_AVAILABLE_DATES类型的普通action
• 对应的reducer监听到匹配的action类型，更新store中的availableDates状态
• 状态变更后，connect通过mapStateToProps把新状态同步回Calendar组件的props，触发组件重渲染

内容的提问来源于stack exchange，提问作者Herr Nentu'