1

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)
  1. 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);
        })
    }
}

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

1 Comment

I solved the problem check for my answer in question... :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.