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

Question

我正在创建一个Web应用程序，用户在图像中的对象周围绘制边界框。

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

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

我也想通过这两个反应，Redux的状态（即两个正在绘制的矩形现在以及已经在终极版“承诺”已矩形）作为道具的孩子作出反应的组成部分。

这是否可以与react-redux的mapStateToProps ？ 我似乎找不到在mapStateToProps React状态和Redux状态组合在一起的mapStateToProps 。

Answer 1

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

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

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

2. 使用mapStateToProps传递redux状态

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

PS - 您可以将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的答案，并给出与您的用例直接相关的信息：

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

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)