State mutation Error with Eventcalendar and Redux

Event calendars & schedulers
1

I’m trying to use the following component:

<Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        data={events}
        onEventClick={onEventClick}
        onEventCreated={onEventCreated}
        onEventDeleted={onEventDeleted}
        onEventUpdated={onEventUpdated}
      />

which updates the dragged event through the following function:

const onEventUpdated = useCallback((args) => {
dispatch(eventStartUpdate({...args.event}));
}, [dispatch]);

the reducer handles the action of updating the event in this way:

case types.eventUpdate:
            return {
                ...state,
                events: state.events.map(
                    e => (e.id === action.payload.id) ? { ...action.payload } : e
                )
            };

Everything seems to be ok, in fact the ‘onEventDeleted’ action is handled in a similar way, but when I try to drag and drop an event I get the following error:

ERROR
A state mutation was detected between dispatches, in the path 'calendar.events.0.start'.  This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)

I tried using Immer but I get a similar error:
ERROR Cannot assign to read only property 'start' of object '#<Object>' TypeError: Cannot assign to read only property 'start' of object '#<Object>'

Drawing
Drawing1920×878 163 KB

Thanks to anyone who can help :wave:

2

Hi @T0N1,

By default the Eventcalendar component will update the data directly.

If you’re working with immutable data, then you’ll have to enable the immutableData option, which result on firing the necessary lifecycle events, where the original data can be updated manually.

1 Like
3

Thanks! I had no idea about the existence of InmutableData option, it’s very interesting, thank you very much!