typescript - how to get and send data using reactjs and redux

Question

I have problem when trying to send data through the function action in redux, my code is below

import React from 'react'
import {connect} from 'react-redux'
import {RetrieveCompany} from '../../folder/action/my.actions'

interface Icampaing{
   campaing: my_data
}

// campaing IS WORKING WELL, GET ME ALL MY DATA
const Personal: React.FC = ({campaing}, props: nay) => {
    React.useEffect(()=>{
        let pf_id: any = campaing.profile ? campaing.profile.id : 0
        let pc_id: any = campaing.profile_ca

        // THE PROBLEM IS HERE SHOW ME THE ERROR
        // TypeError: props.RetrieveCompany is not a function
        props.RetrieveCompany(pf_id, pc_id)

    },[campaing])
     return(<>
         {campaing.all_data} // HERE WHEN LOAD DATA campaing WORKING WELL
     </>)

}
const mapStateToProps = (state: any) =>({
   campaing: state.campaing
})
const mapActionToProps = {
  RetrieveCompany
}
export default connect(mapStateToProps, mapActionToProps)(Personal)

please help me, I think forget something.

best words, and happy new year.....!

Answer 1

You should use mapDispatchToProps instead of mapActionToProps

const mapDispatchToProps = (dispatch) => ({
  RetrieveCompany: () => dispatch(RetrieveCompany())
  // Important: this could be just 
  // RetrieveCompany depends on how you define your action.
  // For naming, I would use camelCase
});

Because what you need to do here is to dispatch an action so that the store will update its state. Then you would read the data returned by mapStateToProps.