8

I'm making a web app where the user draws bounding boxes around objects in an image.

  • How I'm using React's local state: I store the properties of the rectangle while the user is still drawing (i.e. during mouseMove before mouseUp).
  • How I'm using Redux's global store: Once mouseUp fires, the drawing finishes, and updates to the rectangle are no longer made. I want to 'commit' this rectangle to Redux.

Is this the right and/or canonical way to handle state management?

I also want to pass both the React and Redux states (i.e. both the rectangle being drawn right now as well as the rectangles that have been 'committed' already in Redux) as props to a child React component.

Is this possible with react-redux's mapStateToProps? I can't seem to find a way to combine React state and Redux state together in mapStateToProps.

jhuang
  • 766
  • 1
  • 9
  • 16
  • For question about mix React state and Redux store see https://stackoverflow.com/questions/35328056/react-redux-should-all-component-states-be-kept-in-redux-store – Michael Freidgeim May 10 '19 at 21:44

2 Answers2

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)

davidchappy
  • 281
  • 1
  • 8
  • Thanks davidchappy. I was concerned with constantly updating the redux store. Thanks for reassuring me that I'm on the right path! – jhuang Nov 18 '17 at 15:52
4

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  
}
AranS
  • 1,871
  • 10
  • 22
  • Thanks AranS! I didn't realise you could pass props in both the `render()` method and via a mapStateToProps (outside the component class). I'll try that out. Also, if I moved the ephemeral drawing state into the Redux store, would you recommend a store shaped like {currentRect: {...}, committedRects: { byId: {...} } }, or a more global store shaped like this: {allRects: { byId: {...}}}? – jhuang Nov 18 '17 at 15:44
  • as @davidchappy stated, placing the rectangle drawing updates in the redux state can be quite overwhelming. I advise placing only the committed ones in redux store. – AranS Nov 18 '17 at 15:49
  • I've tried to do as you suggested but I can't seem to get the `rectangle` in the `ChildComponent`'s props after using `connect(mapStateToProps)(ChildComponent)`. Any pointers would be really appreciated. – jhuang Nov 19 '17 at 00:33
  • If `rectangle` is part of your redux state, you can access it by using `mapStateToProps` function. can you show a snippet of this function implementation? – AranS Nov 19 '17 at 00:44
  • Right now `rectangle` is not part of the redux state. It's just the Parent component's state. Here's my `mapStateToProps`: `const mapStateToProps = (state, ownProps) => { return { committedBoxes: state.boxes.present} }` – jhuang Nov 19 '17 at 01:01
  • have you passed the parent state to the child component? `mapStateToProps` would not interfere with passing props directly from parent to child. – AranS Nov 19 '17 at 01:05
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159313/discussion-between-arans-and-jhuang). – AranS Nov 19 '17 at 01:06