使用多个Redux操作更新React组件

Question

所以我已经为这个问题problem了一段时间。它是带有redux状态管理的React应用。问题在于，当使用click事件调用操作时，组件将不会更新。我将基于状态中的某个道具动态渲染按钮，如果单击该按钮，它将触发一个调用道具的函数，该道具会分派动作。下面是代码。

以下是组件：

import React, {Component} from 'react';
import moment from 'moment';
import {Table} from 'antd';
import {connect} from "react-redux";
import * as rxActions from '../actions/rxActions';

const columns = [
    {
        title: 'Prescriber', dataIndex: 'doctor', rowKey: 'doctor'
    },
    {
        title: 'Submitted', dataIndex: 'timestamp', rowKey: 'timestamp'
    },
    {
        title: 'Prescription', dataIndex: 'prescription', rowKey: 'prescription'
    },
    {
        title: 'Refills', dataIndex: 'refills', rowKey: 'refills'
    },
    {
        title: 'Qty', dataIndex: 'quantity', rowKey: 'quantity'
    },
    {
        title: 'Exp', dataIndex: 'expDate', rowKey: 'exp'
    },
    {
        title: 'Status', dataIndex: 'status', rowKey: 'status'
    }
];

class RxHistory extends Component {

    handleFill(data) {
        this.props.fetchFillRx(
            {
                "patientID": this.props.onePatient.data.patientID,
                "rxid": data.rxid,
                "timestamp": moment(data.timestamp).valueOf(),
                "pharmacist": "pha",
                "phLicense": "pha01",
                "prescription": data.prescription,
                "refills": data.refills,
                "status": 'filled',
                "expDate": moment(data.expDate).valueOf()
            }
        )
    };

    handleApprove(data) {
        this.props.fetchApproveRx(
            {
                "patientID": this.props.onePatient.data.patientID,
                "rxid": data.rxid,
                "timestamp": moment(data.timestamp).valueOf(),
                "approved": "true"
            }
        )

    };

    checkStatus(data) {
        if (this.props.provider.type === 'pharmacist') {
            if (data.status !== 'filled') {
                return (
                    data.status = <button
                        type='button'
                        onClick={() => {
                            this.handleFill(data)
                        }}>
                        Fill Rx
                    </button>
                )
            }
            return (data.status = 'filled')
        }
        if (this.props.provider.type === 'insurance') {
            if (data.status === 'filled') {
                if (data.approved === 'false') {
                    return (
                        data.status = <button
                            type='button'
                            onClick={() => {this.handleApprove(data)}}>
                            Approve Rx
                        </button>
                    )
                }
            }
        }
        return data.status
    };

    renderTable() {
        if (this.props.rxHistory.isFetching) {
            return (
                <div className='ant-table-placeholder'>Loading...</div>
            )
        }
        if (this.props.rxHistory.rx.rxList) {
            const rxHistory = this.props.rxHistory.rx.rxList
                .map(data => {
                    data.timestamp = moment(data.timestamp).format('MM/DD/YYYY');
                    data.expDate = moment(data.expDate).format('MM/DD/YYYY');
                    data.status = this.checkStatus(data);
                    return data
                });
            if (this.props.provider.type !== 'doctor') {
                const reducedHistory = rxHistory.reduce((acc, data) => {
                    if (data.status !== 'filled' && data.approved !== 'true') {
                        acc.push(data);
                    }
                    return acc;
                }, []);

                return (
                    <Table columns={columns} dataSource={reducedHistory} rowKey={reducedHistory => reducedHistory.rxid}/>
                );
            }

            return (
                <Table columns={columns} dataSource={rxHistory} rowKey={rxHistory => rxHistory.rxid}/>
            );
        }

        return(
            <Table columns={columns} rowKey={null} />
        )
    }


    render() {
        return (
            this.renderTable()
        )
    }

}

const mapStateToProps = ({ onePatient, rxHistory }) => {
    return { onePatient, rxHistory }
};

export default connect(mapStateToProps, rxActions)(RxHistory);

这是动作：

export const fetchFillRx = data => async dispatch => {
    dispatch({type: FILLING_RX});
    try {
        const res = await axios.patch(rxUrl, data);
        dispatch({
            type: FILL_RX,
            payload: res.data
        }).then(
            dispatch({type: FETCH_RX_HISTORY})
        )
    }
    catch (e) {
        dispatch({
            type: FILL_RX_ERROR,
            payload: e
        })
    }
};

这是减速器：

import {
    FILLING_RX,
    FILL_RX,
    FILL_RX_ERROR
} from "../actions/types";

const INITIAL_STATE = {
    isFetching: false,
    res: ""
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case FILLING_RX:
            return {
                ...state,
                isFetching: true,
            };

        case FILL_RX:
            return {
                ...state,
                isFetching: false,
                res: action.payload,
            };

        case FILL_RX_ERROR:
            return {
                ...state,
                isFetching: false,
                res: "Failed to fill Rx",
            };

        default:
            return {
                ...state
            };
    }
};

我一直在尝试使用componentDidUpdate时遇到的效果是一个无限循环，或者它将处理动作，在redux开发工具中显示该动作，但不更新组件，或者会说rxHistory的属性.rx.rxList未定义。

任何帮助将不胜感激。