title: handleLayoutchange of react-grid-layout
body: <p>I am seeing few complexities with working on react-grid-layout (from <a href="https://github.com/STRML/react-grid-layout" rel="nofollow noreferrer">https://github.com/STRML/react-grid-layout</a>) when i integrate it with onlayoutChange method.</p>
  
  <p>Whenever i add a new item, I do add a layout and item to existing state with customized id for layout. (In this case for simplicity i am using date.now(). But i have some more complex logic for it based on my requirement)</p>
  
  <p>I add a new item, resize and drag it to a new position which triggers 'onLayoutChange' of ResponsiveReactGridLayout. When observing the input for this, I am not seeing the custom id property set to layout. (Added screenshot of what i am getting as input)</p>
  
  <p>I am using onLayoutChange to update store. If i dont do this, when I add a new item, the entire layout is getting reset.
  <a href="https://i.stack.imgur.com/pzpcM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pzpcM.png" alt="enter image description here"></a></p>
  
  <p>below is the code I am using for this</p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import ReactDOM from 'react-dom'
  import { createStore } from 'redux'
  import { Provider, connect } from 'react-redux'
  
  import { Responsive, WidthProvider } from 'react-grid-layout';
  const ResponsiveReactGridLayout = WidthProvider(Responsive);
  import _ from 'lodash';
  
  
  // React component
  class Counter extends Component {
  
        onCustomLayoutChange(layout) {
          debugger
  
  }
    render() {
      const { value, onIncreaseClick } = this.props
      return (
        &lt;div&gt;
          &lt;span&gt;{value.length}&lt;/span&gt;
  &lt;span&gt;{this.props.layout.length}&lt;/span&gt;
  
  
  
       &lt;ResponsiveReactGridLayout className="layout" layouts={{lg: this.props.layout}} verticalCompact={false}
                          onLayoutChange={(e) =&gt; this.onCustomLayoutChange(e)}
                          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
                          cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
                          rowHeight={30}
                      &gt;
                          {
                              _.map(value, (item,i) =&gt; (
                                  &lt;div style={{border:'1px solid red', margin:'10px'}} key={i} &gt;
                                      {item}
                                  &lt;/div&gt;
                              ))
                          }
                      &lt;/ResponsiveReactGridLayout&gt;
  
  
          &lt;button onClick={onIncreaseClick}&gt;Add item&lt;/button&gt;
  
          &lt;ul&gt;
  {
                              _.map(this.props.layout, (item,i) =&gt; (
                                  &lt;li   key={i} &gt;
                                      {item.i}
                                  &lt;/li&gt;
                              ))
                          }
    &lt;/ul&gt;
        &lt;/div&gt;
      )
    }
  }
  
  Counter.propTypes = {
    value: PropTypes.array,
    onIncreaseClick: PropTypes.func.isRequired
  }
  
  // Action
  const increaseAction = { type: 'increase' }
  
  const onLayoutChangeAction =   { type: 'update_layout' }
  
  // Reducer
  function counter(state = { count: [], layout: [] }, action) {
    let count = _.cloneDeep(state.count) 
    let layout =_.cloneDeep( state.layout)
    switch (action.type) {
      case 'increase':
      let id = Date.now()
      count.push('hello '+id)
      layout.push({
                  i: `${id}`,
                  x: 0,
                  y: 0,
                  w:  1,
                  h: 1
              })
  
              return Object.assign({}, state, { count: count, layout: layout });
       // return { count: count, layout: layout }
  
      case 'update_layout':
  
      return state
      default:
        return state
    }
  }
  
  // Store
  const store = createStore(counter)
  
  // Map Redux state to component props
  function mapStateToProps(state) {
    return {
      value: state.count,
      layout: state.layout,
    }
  }
  
  // Map Redux actions to component props
  function mapDispatchToProps(dispatch) {
    return {
      onIncreaseClick: () =&gt; dispatch(increaseAction),
  
       onLayoutChangeAction: () =&gt; dispatch(onLayoutChangeAction)
  
    }
  }
  
  // Connected Component
  const App = connect(
    mapStateToProps,
    mapDispatchToProps
  )(Counter)
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  )
  </code></pre>
  
  <p>Can someone help me out in letting me know what am I missing here?
  Thanks in Advance.</p>