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

Question

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

• 我如何使用React的本地状态：我在用户仍在绘制时（即在mouseMove之前mouseUp）。
• 我如何使用Redux的全局存储区：mouseUp触发后，绘图完成，不再更新矩形。我想将此矩形“提交”到Redux。

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

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

这是可能的react-redux的mapStateToProps？我似乎找不到一种将React状态和Redux状态组合在一起的方法mapStateToProps。

Answer 1

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

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

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Answer 2

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

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

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

2. 使用传递 redux 状态mapStateToProps

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

PS - 你可以用于mapStateToPropsreact和redux状态，但是这是多余的，因为你已经明确地传递了react props。

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