Using Redux with react-grid-layout

Question

I'm using react-grid-layout (RGL) to implement this use case with two considerations

to keep the state of the app including GridItems' child components
enable communication between GridItems' child components (events, streams of data,

etc)

Inspecting the RGL tree on React Dev tools I can see that there are many intermediate components.

I was wondering if anyone has implemented a similar scenario, and if theres a way to use a Redux store and pass it down the RGL tree to GridItems' child components.

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

Many thanks,

FØ

Francisco Bernardo · Answer 1 · 2018-01-04T22:15:50.200

Answering my own redux-noob question:

The fact that there are many invisible elements in the tree doesn't prevent passing the store down the element. Our custom-defined components (i.e., subcomponents of GridItem and leaves on the component tree) can get the store using the redux's connect as conventionally.

React-grid-layout

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);

The custom-defined component

class myCustomComponent extends Component {

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

The resulting component tree in ReactDevTools,

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

and the redux store and dispatch are part of their props.

Using Redux with react-grid-layout

1 Answers1