使用HOC和Redux Store重用组件的最佳方法是什么

Question

我正在使用react + redux开发一个应用程序以了解它，我不确定在以下情况下什么是最佳解决方案：

我有一个呈现Rectangle的组件Rectangle和一个RectangleControlPoints子级。

 render(){
    return  <g>
                <rect x={this.props.x}
                    y={this.props.y}
                    width={this.props.width}
                    height={this.props.height}
                    className="cd-attribute-container"
                    onClick={this.props.onClick}
                    >
                </rect>
                <RectangleControlPoints rect_x={this.props.x}
                    rect_y={this.props.y}
                    rect_width={this.props.width}
                    rect_height={this.props.height}>
                </RectangleControlPoints>
             </g>}

如您所见，RectangleControlPoints在道具上接收一些矩形坐标作为道具，进行一些计算，然后在矩形周围渲染一些点以使其能够调整大小。

计算并渲染点的矩形

当我使用Redux时，矩形的所有坐标都在redux存储中（点坐标不存储，我使用备忘录）。当我拖动这些点时，矩形属性在商店中发生了变化，导致矩形的重新渲染，没关系，那太好了。

现在我的应用程序正在增长，我意识到我会遇到很多不同类的情况，这些情况只会使用RectangleControlPoints类来呈现这些点以调整其大小。但是那时每个人都会在商店中使用不同的位置。

我的第一个想法是创建一个HOC来包装RectangleControlPoints并使它的存储连接灵活。看起来像这样

export default ClassRectangleHOC( RectangleControlPoints );


export default OtherClassRectangleHOC( RectangleControlPoints );

乍一看，我认为它会起作用，HOC会保留存储连接逻辑，并且EectangleControlPoints是可重用的。但是要调整三角形的大小，我需要访问Wrapped RectangleControlPoints类内的点的 state 。我不知道这是否可行，但我认为这是一个丑陋的做法。我敢肯定，有更好的方法可以做到这一点。

简而言之，我想通过不同的存储连接重用同一元素。我认为HOC是一种不错的方法，但并不完全知道最佳方法。

我希望我的解释很清楚。