score:4

Accepted answer

mapStateToProps is used to connect redux state with a component's props. You are basically doing two separate things:

  1. pass drawing details to the child component using the parent state:

    //Parent component render function
    render() {
        <ChildComponent rectangle={this.state.rectangle}/>
    }
    
  2. pass the redux state using mapStateToProps

Have you considered saving the drawing state in redux instead of the parent component state? This way, multiple components (such as the child component) are aware of the rectangle drawing.

P.S - you can use mapStateToProps for both react and redux state but this is redundant as you have already passed react props explicitly.

mapStateToProps = (state, ownProps) => {
   fromReduxStore: state.whatever,
   fromReactState: ownProps //doesn't make sense as this prop exists already on the child component  
}

score:5

Just to elaborate a little more on AranS's answer and give you a direct correlation to your use case:

  1. The way you're doing it is fine in principle. You're keeping the very frequent state updates local (basically, mousemove while mousedown). It would be annoying and potentially inefficient to update the Redux state for every mouse move (ex: if using Redux logger, you'd needlessly get a mile-long log). You would only do so (as hinted at by AranS) if other components need to know the state of your mouse position in real time. I am using the same approach you are in a 3D modeling app and it works great.
  2. To save the shape's data in Redux, you would use standard Redux methodology. If you need to brush up, I would highly recommend googling for Redux' creator, Dan Abramov, as has published some useful and often free material (look at this series for example). mapStateToProps is typically used with mapDispatchToProps via react-redux's connect method. Giving you something like:

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)


Related Query

More Query from same tag