title: A state mutation was detected between dispatches while creating new widget-Reactjs ,Redux
body: <p>Getting error while creating widget list</p>
  
  <p>if i click on widget list for the first time i am able to create the widget       (widget 1).</p>
  
  <p>if i create another widget to it i am getting an error(A state mutation).</p>
  
  <p>if i create another widget , i am able to create widget with out error(widget 3 )</p>
  
  <p><strong>Error:A state mutation was detected between dispatches, in the path ``. This may cause incorrect behavior.</strong></p>
  
  <p>code</p>
  
  <pre><code>addWidget = (widgetType) =&gt; {
  let newWidget = {};
  switch (widgetType) {
    case 'venn':
      newWidget = {
        widgetName: `widget ${this.state.widgetCount}`,
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
        leftTargetValue: 0,
        rightTargetValue: 0,
        position: { row: 0, col: 0 },
      };
      break;
  default:
      newWidget = {
        widgetName: `Default ${this.state.widgetCount}`,
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
      };
      break;
  }
  this.setState(prevState =&gt; ({
    widgetsList: [...this.state.widgetsList, newWidget],
    isHidden: !prevState.isHidden,
    widgetCount: this.state.widgetCount + 1,
  }), () =&gt; this.props.storyboardActions.addWidget(newWidget, this.props.selectedBoard.boardId));  
  };
  </code></pre>
  
  <p>Reducer</p>
  
  <pre><code>case types.ADD_NEW_WIDGET: {
    const newBoardList = state.boardList.map((item) =&gt; {
      if (item.boardId === action.selectedBoardId) {
        return {
          ...item,
          modifiedAt: Date.now(),
          widgetList: [...(item.widgetList || []), { widgetId: uuid(), ...action.newWidget }],
        };
      }
      return item;
    });
    return { ...state, boardList: [...newBoardList] };
  }
  </code></pre>
  
  <p>Action</p>
  
  <pre><code>export const addWidget = (newWidget, selectedBoardId) =&gt; ({
  type: types.ADD_NEW_WIDGET,
  payload: { 
  widget: newWidget,
  boardId: selectedBoardId,
  },
  });
  </code></pre>