Question

我正在制作一个网络应用，用户在图像中的对象周围绘制边界框。

我如何使用React的本地状态：我在用户仍在绘制时存储矩形的属性（即在mouseMove之前mouseUp期间）。
我如何使用Redux的全局商店：一旦mouseUp触发，绘图就会完成，并且不再对矩形进行更新。我想把这个矩形“提交”给Redux。

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

我还想传递两者 React和Redux状态（即现在绘制的矩形以及已经在Redux中已经'已经提交'的矩形）作为子项的道具反应组件。

react-redux的{{1}}是否可以这样做？我似乎找不到在mapStateToProps中将React状态和Redux状态组合在一起的方法。

Answer 1

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

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

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

使用mapStateToProps

您是否考虑过在redux而不是父组件状态中保存绘图状态？这样，多个组件（例如子组件）就会知道矩形绘图。

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

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

Answer 2

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

你这样做的方式原则上很好。您将非常频繁的状态更新保留在本地（基本上mousemove而mousedown）。为每次鼠标移动更新Redux状态会很烦人并且可能效率低下（例如：如果使用Redux记录器，则不必要地获取一英里长的日志）。如果其他组件需要实时了解鼠标位置的状态，您只能这样做（如AranS暗示的那样）。我使用的是与3D建模应用程序相同的方法，效果很好。
要在Redux中保存形状数据，您可以使用标准Redux方法。如果你需要刷新，我强烈推荐谷歌搜索Redux的创作者丹阿布拉莫夫，因为已经发布了一些有用且经常免费的材料（例如this series）。 mapStateToProps通常通过mapDispatchToProps react-redux方法与connect一起使用。给你这样的东西：

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

将React本地状态与Redux全局状态相结合

2 个答案: