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

【问题标题】：Combining React local state with Redux global state将 React 本地状态与 Redux 全局状态相结合
【发布时间】：2018-05-02 05:29:19
【问题描述】：

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

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

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

我还想将both React 和 Redux 状态（即现在正在绘制的矩形以及 Redux 中已经“提交”的矩形）作为道具传递给孩子反应组件。

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

【问题讨论】：

关于混合 React 状态和 Redux 存储的问题请参阅stackoverflow.com/questions/35328056/…

标签： javascript reactjs redux react-redux

【解决方案1】：

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

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

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

【讨论】：

感谢 davidchappy。我担心不断更新 redux 商店。感谢您向我保证我走在正确的道路上！

【解决方案2】：

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

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

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

使用mapStateToProps传递redux状态

你是否考虑过将绘图状态保存在 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  
}

【讨论】：

感谢 AranS！我没有意识到您可以在 render() 方法和 mapStateToProps （在组件类之外）中传递道具。我会试试看。另外，如果我将临时绘图状态移动到 Redux 存储中，你会推荐一个形状像 {currentRect: {...}、committedRects: { byId: {...} } } 的存储，还是一个更全局的存储像这：{allRects：{ byId：{...}}}？
正如@davidchappy 所说，将矩形绘图更新置于redux 状态可能会让人不知所措。我建议只将提交的那些放在 redux 商店中。
我已尝试按照您的建议进行操作，但在使用connect(mapStateToProps)(ChildComponent) 后，我似乎无法在ChildComponent 的道具中获得rectangle。任何指针将不胜感激。
如果rectangle是你的redux状态的一部分，你可以使用mapStateToProps函数访问它。你能展示一下这个函数实现的sn-p吗？
现在 rectangle 不是 redux 状态的一部分。这只是父组件的状态。这是我的mapStateToProps：const mapStateToProps = (state, ownProps) => { return { committedBoxes: state.boxes.present} }