Properly using mapActionsToProps in a functional component (react-redux) - reactjs

Question

const updateRouterArr = () => {
if (this.props.router_addr && this.props.router_username && this.props.router_pw) {
this.props.updateRouterArr({
router_addr: this.props.router_addr,
router_username: this.props.router_username,
router_pw: this.props.router_pw
})
} else {
alert('Some fields are missing')
}
}
export const RouterCard = (props) => {
return (
<div>
...
</div>
);
}
const mapStateToProps = state => ({
routers: state.router.routers,
router_addr: state.router.router_addr,
router_username: state.router.router_username,
router_pw: state.router.router_pw,
})
const mapActionsToProps = {
updateRouterElem: updateRouterElem,
updateRouterArr: updateRouterArr,
deleteRouterElem: deleteRouterElem,
}
export default connect(mapStateToProps, mapActionsToProps)(RouterCard);
I am using a functional component with React-Redux. When I tried this, it gave me Parsing error: Identifier 'updateRouterArr' has already been declared
I get why that is happening, but I am not sure about how to properly use React-Redux when using a functional component.
I've declared all actions that I need in
const mapActionsToProps = {
updateRouterElem: updateRouterElem,
updateRouterArr: updateRouterArr,
deleteRouterElem: deleteRouterElem,
}
but it's quite confusing since it does not recognize this.props anymore.
How can I fix this?

Answer 1

You just don't need this. before props. Functional component will receive props as argument.
So code will look like
// Assuming that updateRouterArr is global function
const updateRouterArr = (props) => {
if (props.router_addr && props.router_username && props.router_pw) {
props.updateRouterArr({
router_addr: props.router_addr,
router_username: props.router_username,
router_pw: props.router_pw
})
} else {
alert('Some fields are missing')
}
}
export const RouterCard = (props) => {
// And you can call it from RouterCard component
updateRouterArr(props);
return (
<div>
...
</div>
);
}
const mapStateToProps = state => ({
routers: state.router.routers,
router_addr: state.router.router_addr,
router_username: state.router.router_username,
router_pw: state.router.router_pw,
})
const mapActionsToProps = {
updateRouterElem: updateRouterElem,
updateRouterArr: updateRouterArr,
deleteRouterElem: deleteRouterElem,
}
export default connect(mapStateToProps, mapActionsToProps)(RouterCard);
And simple example

Answer 2

You can try this whether this helps. I have made some changes in mapActionsToProps and I have use object destructuring for getting the props. Props can be accessed by same names.
const updateRouterArr = (
{updateRouterElem, updateRouterArr, deleteRouterElem, routers, router_addr, router_username, router_pw}
) => {
if (router_addr && router_username && router_pw) {
updateRouterArr({
router_addr: router_addr,
router_username: router_username,
router_pw: router_pw
})
} else {
alert('Some fields are missing')
}
}
export const RouterCard = (props) => {
return (
<div>
...
</div>
);
}
const mapStateToProps = state => ({
routers: state.router.routers,
router_addr: state.router.router_addr,
router_username: state.router.router_username,
router_pw: state.router.router_pw,
})
const mapActionsToProps = {
updateRouterElem,
updateRouterArr,
deleteRouterElem,
}
export default connect(mapStateToProps, mapActionsToProps)(RouterCard);