Refresh custom lightning component when another custom lightning component call refresh

Question

I have two custom components added in flexipage. I want to refresh component A with latest data when a certain action is performed on component A

    // cmp 1
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" >
    <aura:handler name="init" value="{!this}" action="{!c.onInit}" />

</aura:component>

// cmp1controller
({
    
    onInit: function (component, event, helper) {
        
        // do something to save record which will change records for component B
        $A.get('e.force:refreshView').fire();
    }
})

and

// cmp 2
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" >
    <aura:handler name="init" value="{!this}" action="{!c.onInit}" />

    <aura:handler event="force:refreshView" action="{!c.doInit}" />
</aura:component>

// cmp2controller
({
    
    onInit: function (component, event, helper) {
        
        // fetch and show data in the component
    }
})

when i perform certain action on component A and then call $A.get('e.force:refreshView').fire(); i want component B to get refreshed so I have placed refresh handler in cmp B. But it is not refreshing cmp B.

Can anybody help me with this? Am I missing anything or doing anything wrong? Any help is appreciated. Thanks

Answer 1

You have two different functions in there. One is doInit and other one is onInit.

Make sure you have defined doInit in your handler.

// cmp2controller
({

   doInit: function (component, event, helper) {
    
    // fetch and show data in the component
   }
})