将 Redux 与 react-grid-layout 一起使用答案

【问题标题】：Using Redux with react-grid-layout将 Redux 与 react-grid-layout 一起使用
【发布时间】：2018-01-03 16:14:35
【问题描述】：

我使用 react-grid-layout (RGL) 来实现这个用例，有两个考虑

保持应用程序的状态，包括 GridItems 的子组件
启用 GridItems 的子组件（事件、数据流，

等）

在 React Dev 工具上检查 RGL 树我可以看到有很多中间组件。

我想知道是否有人实现了类似的场景，是否有办法使用 Redux 存储并将其沿 RGL 树传递给 GridItems 的子组件。

<ResponsiveReactGridLayout
<ReactGridLayout
<div
<GridItem
<DraggableCore
<Resizable
<div
<UserChildComponent

非常感谢，

FØ

【问题讨论】：

标签： reactjs redux middleware react-grid-layout

【解决方案1】：

回答我自己的 redux-noob 问题：

树中有许多不可见元素的事实并不能阻止将商店向下传递元素。我们自定义的组件（即 GridItem 的子组件和组件树上的叶子）可以像往常一样使用 redux 的 connect 来获取 store。

反应网格布局

class Layout extends React.PureComponent {
render() {
return (
  <div>
    <ResponsiveReactGridLayout
      onBreakpointChange={this.onBreakpointChange}
      {...this.props}
    >
      {_.map(this.state.items, el => this.createElement(el))}
    </ResponsiveReactGridLayout>
  </div>


export default connect(state => state)(Layout);

自定义组件

class myCustomComponent extends Component {

export default connect(state => state) (myCustomComponent);

ReactDevTools 中生成的组件树，

<Connect(Layout)
 <ResponsiveReactGridLayout
  <ReactGridLayout
   <div
    <GridItem
     <DraggableCore
      <Resizable
       <div
        <Connect(UserChildComponent)

redux store 和 dispatch 是他们 props 的一部分。

【讨论】：