changing Redux state does not affect the render view - reactjs

Question

I am making a generic component and using it in a composite component also i pass some props to the generic component to behave in a certain way.I have used Redux to manage my state but when updating the state in Redux the component didn't re-render with the updated state.
Here are the components:
Generic component
export default class LabeledCheckBox extends Component {
constructor(props) {
super(props);
this.state = {
checked: false,
uncheckable: this.props.disableCheckBox
? this.props.disableCheckBox
: false
};
}
handleChange = (event) => {
this.setState({ checked: event.target.checked });
};
render() {
return (
<Form.Group as={Row}>
<Form.Label column="True" sm={9}>
{this.props.controlLabel}
</Form.Label>
<Col sm={3}>
<Form.Check
type="checkbox"
onChange={this.handleChange}
checked={this.state.checked}
onClick={this.props.clicked}
disabled={this.state.uncheckable}
/>
</Col>
</Form.Group>
);
}
}
LabeledCheckBox.propTypes = {
controlLabel: PropTypes.string.isRequired,
disableCheckBox: PropTypes.bool
};
parent component
export default class Endorsments extends Component {
constructor(props, context) {
super(props, context);
this.state = {
open: false
};
}
render() {
const { open } = this.state;
return (
<React.Fragment>
<LabeledCheckBox
clicked={() => this.setState({ open: !open })}
aria-controls="example-collapse-text"
aria-expanded={open}
controlLabel="Apply Endorsment"
disableCheckBox={!this.props.EndorsementSupported}
/>
<Collapse in={this.state.open}>
<div id="example-collapse-text">
<LabeledTextBoxWithCheckBox
controlLabel="BankName"
controlName="setBankName"
style={{ paddingBottom: '10px' }}
/>
<LabeledDateWithCheckBox controlLabel="Cheque Date" />
<Row>
<Col sm={6}>
<LabeledCheckBox controlLabel="User Name" />
</Col>
<Col sm={6}>
<LabeledCheckBox controlLabel="Cheque Sequence" />
</Col>
</Row>
</div>
</Collapse>
</React.Fragment>
);
}
}
Composit Component
class Preferences extends Component {
constructor(props, context) {
super(props, context);
this.props.fetchSupportedVendors();
}
loadScannersBasedOnVendor = () => {
if (
this.props.lastSelected.name === 'scannersVendors' ||
this.props.supportedScannerModule.length !== 0
) {
let select = this.props.supportedScannerModule.filter(
(element) =>
element.vendor ===
this.props.lastSelected.selectedObject.value
);
return select.map((element) => {
return { value: element.Value, label: element.name };
});
}
};
loadScannerMicrFonts = () => {
let supportedMicrs = [];
this.props.scannerCapabilities.supportedMicrFonts.forEach(
(element, key) => {
if (element.supported)
supportedMicrs.push({ value: key, label: element.value });
}
);
return supportedMicrs;
};
loadScannerBitDepth = () => {
let supportedBitDepth = [];
this.props.scannerCapabilities.supportedBitDepth.forEach(
(element, key) => {
if (element.supported)
supportedBitDepth.push({
value: key,
label: element.value
});
}
);
return supportedBitDepth;
};
afterSelectionEnded = () => {
if (
this.props.lastSelected &&
this.props.lastSelected.name === 'scannersModel' &&
!this.props.scannerCapabilities.supportedBitDepth
) {
this.props.loadScannerCapablilitiesToState(
this.props.lastSelected.selectedObject.value
);
}
};
render() {
return (
<Modal
{...this.props}
aria-labelledby="contained-modal-title-vcenter"
centered
dialogClassName="scanningModal"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Preferences
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row>
<h4>Default Scanner</h4>
</Row>
<Row>
<Col sm={12}>
<LabeledDropDown
controlLabel="Vendor"
controlName="scannersVendors"
placeholder="select a vendor please"
dropdownValues={
this.props.supportedScannerVendor
}
/>
</Col>
</Row>
<Row>
<Col sm={12}>
<LabeledDropDown
controlLabel="Model"
controlName="scannersModel"
placeholder="select model"
dropdownValues={[]}
loadDynamicItems={
this.loadScannersBasedOnVendor
}
afterValueChanged={this.afterSelectionEnded}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<VerticalLabeledDropDown
controlLabel="MICR Font"
controlName="ScannerMicrFont"
placeholder="select MICR Font"
dropdownValues={[]}
loadDynamicItems={this.loadScannerMicrFonts}
/>
</Col>
<Col sm={6}>
<VerticalLabeledDropDown
controlLabel="Bit Depth"
controlName="scannerBitDipth"
placeholder="select BitDepth"
dropdownValues={[]}
loadDynamicItems={this.loadScannerBitDepth}
/>
</Col>
</Row>
<hr />
<Row>
<h4>Scanner Feature</h4>
</Row>
<Endorsments
EndorsementSupported={
this.props.scannerCapabilities.supportedEndorsement
}
/>
<hr />
<Row>
<h4>General</h4>
</Row>
<Row>
<Col sm={6}>
<LabeledCheckBox controlLabel="Auto Save" />
</Col>
<Col sm={6}>
<LabeledCheckBox controlLabel="View While Scanning" />
</Col>
</Row>
<Row>
<Col sm={6}>
<LabeledCheckBox controlLabel="Use OCR for amount & date" />
</Col>
<Col sm={6}>
<LabeledCheckBox controlLabel="With UV scan" />
</Col>
</Row>
<Row>
<Col sm={12}>
<LabeledCheckBox controlLabel="Dont Show Prining language dialog" />
</Col>
</Row>
</Modal.Body>
<Modal.Footer bsPrefix="internal-modal-footer">
<Button onClick={this.props.onHide}>Close</Button>
<Button onClick={this.props.onHide}>Apply</Button>
</Modal.Footer>
</Modal>
);
}
}
const mapStateToProps = (state) => ({
supportedScannerVendor: state.supportedScanners.supportedVendors,
supportedScannerModule: state.supportedScanners.SupportedScanners,
lastSelected: state.dropdownEvents.dropDownSelectionChanged,
scannerCapabilities: state.supportedScanners.ScannerCapabilities
});
export default connect(mapStateToProps, {
fetchSupportedVendors,
loadScannerCapablilitiesToState
})(Preferences);
Finally
when calling loadScannerCapablilitiesToState the state is changed for this.props.scannerCapabilities.supportedEndorsement but it did not re-render the generic component to be disable or enabled
Am i missing something any help please?

Answer 1

if the Redux state is properly working then you need to change the state in LabeledCheckBox component.
componentDidUpdate() is invoked immediately after updating occurs.
componentDidUpdate = (prevProps, prevState) => {
if (prevProps.disableCheckBox !== this.props.disableCheckBox) {
this.setState({ uncheckable: this.props.disableCheckBox });
}
};
Read more about React lifecycle