TypeError: Cannot read property 'actions' of undefined (React-Redux)

Question

So, I am working with Redux in React and I want to update my component once the user is finish with moving or resizing the component, but I get that property "actions" is undefined. I might say that he enters the function updatePortletLocation and consol.log the obj1 I have passed it, so he enters the function but not the actions. Can someone please help me?

These are the most important parts of the code:

1. App.js:

class App extends Component {

    constructor(props){
      super(props);
    }

    updatePortletLocation(layout, child, newItem){
        var res = newItem.i;
        var res1 = res.split(" ");
        var obj = '[{"portletlocationid":' + Number(res1[0]) + ', "portletid":' +  Number(res1[1]) + ', "dashboardid":' + Number(res1[2]) + ', "width":' +  Number(newItem.w) + ', "height":' + Number(newItem.h) + ', "column":' + Number(newItem.y) + ', "row":' + Number(newItem.x) + '}]';
        var obj1 = JSON.parse(obj);     
        console.log(obj1);
        this.props.actions.updatePortletLocation(obj1);
    }

 /* Render part of the code:  */

  return (
            <ul>
                <ReactGridLayout className="layout" layout="fit" cols={12} rowHeight={30} width={1200} onDragStop={this.updatePortletLocation} 
                     onResizeStop={this.updatePortletLocation} >
                    {this.props.portletlocations.map((portletlocation) => (
                        <div 
                            key={portletlocation.id + " " + portletlocation.portlet.id + " " + portletlocation.dashboard.id} 
                            data-grid={{ x: portletlocation.column, 
                                         y: portletlocation.row, 
                                         w: portletlocation.width, 
                                         h: portletlocation.height}} 
                         >
                            {portletlocation.portlet.title}
                            {portletlocation.portlet.description}
                         </div>

                    ))}
                </ReactGridLayout>
            </ul>
        );

 /* Map dispatch to props: */

 const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(portletLocationsAction, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (App)

2. Action:

export function updatePortletLocation(portletlocation){
    return(dispatch) => {
        fetch('http://localhost:8080/portletlocation/update', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body:JSON.stringify({
                "portlet": {
                    "portletId": portletlocation[0].id,
                    "id": portletlocation[0].portletid 
                },
                "dashboard":{
                    "dashboardId": portletlocation[0].dashboardid,
                    "id": portletlocation[0].dashboardid
                },
                "portletLocationId": portletlocation[0].portletlocationid,
                "id": portletlocation[0].portletlocationid,
                "column": portletlocation[0].column,
                "row":  portletlocation[0].row,
                "height": portletlocation[0].height,
                "width": portletlocation[0].width 
            })
        }).then(responsePortletLocation => {
            console.log("Successfully updated portlet location!");
            dispatch(updatePortletLocationSuccess(responsePortletLocation));
        }).catch(error => {
            throw(error);
        })
    }
}

Answer 1

Instead of this.props.actions.updatePortletLocation(obj1);,
try this.props.updatePortletLocation(obj1);.

---

Regarding mapDispatchToProps:

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

source