Myujth

So I've been bashing my brain against this problem for awhile. Its a react app with redux state management. The problem is the component will not update when a click event is used to call a action. I'm rendering the button dynamically based on a certain prop in the state, if the button is clicked, it triggers a function that calls a prop which dispatches the action. Below is the code.

Here is the component:

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);

Here is the Action:

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
 )
 
;

Here is the reducer:

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
 ;
 
;

The effects I've been experiencing is either an infinite loop when trying to use componentDidUpdate, or it will process the action, display the action in redux dev tools, but not update the component, or will say that the property of rxHistory.rx.rxList is undefined.

Any help would be greatly appreciated.