将React局部状态与Redux全局状态相结合

Question

我正在制作一个web应用程序，用户可以在图像中的对象周围绘制边界框。

• 我如何使用React的本地状态：当用户仍在绘图时(即在mouseMove期间，在mouseUp之前)，我存储矩形的属性
• 我如何使用Redux的全局存储：一旦mouseUp激发，绘图将完成，并且不再更新矩形。我想将此矩形"提交"给Redux

这是处理状态管理的正确和/或规范方式吗？

我还想将React和Redux状态(即现在正在绘制的矩形以及已经在Redux中"提交"的矩形)作为道具传递给子React组件。

react-redux的mapStateToProps可能做到这一点吗？我似乎找不到在mapStateToProps中将React状态和Redux状态结合在一起的方法。

Answer 1

只是详细说明AranS的答案，并为您提供与用例的直接关联：

1. 你做这件事的方式原则上是好的。您将非常频繁的状态更新保持在本地(基本上是mousemove和mousedown)。为每一次鼠标移动更新Redux状态会很烦人，而且可能效率低下(例如：如果使用Redux记录器，你会不必要地得到一英里长的日志)。只有当其他组件需要实时了解鼠标位置的状态时，您才会这样做(正如AranS所暗示的那样)。我使用的方法与你在3D建模应用程序中使用的方法相同，效果很好
2. 要在Redux中保存形状的数据，您可以使用标准Redux方法。如果你需要复习，我强烈建议你在谷歌上搜索Redux的创作者Dan Abramov，因为他已经发布了一些有用且通常是免费的材料(例如，看看这个系列)。mapStateToProps通常通过react-redux的connect方法与mapDispatchToProps一起使用。给你这样的东西：

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Answer 2

mapStateToProps用于将redux状态与组件的props连接起来。你基本上是在做两件独立的事情：

1. 使用父状态将图形详细信息传递给子组件：

   //Parent component render function
   render() {
   <ChildComponent rectangle={this.state.rectangle}/>
   }
   

2. 使用mapStateToProps通过冗余状态

您是否考虑过将图形状态保存为redux而不是父组件状态？通过这种方式，多个零部件(例如子零部件)都知道矩形图形。

p.S-您可以将mapStateToProps用于react和redux状态，但这是多余的，因为您已经显式地传递了react道具。

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