Обновление React Component с помощью нескольких действий Redux

Question

Так что я некоторое время избивал свой мозг против этой проблемы. Это реагирующее приложение с избыточным управлением состояниями. Проблема в том, что компонент не будет обновляться при использовании события 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 dev, но не обновлять компонент, либо сообщать, что свойство rxHistory .rx.rxList не определен.

Любая помощь будет принята с благодарностью.