Couldn't work with 'immerable' custom Class

It seems that there are few problems with immerable Classes.

Imagine following class

import { immerable } from 'immer';

export class DocLoading {
  [immerable] = true;
  constructor(data = {}) {
    this.documentId = data.documentId;
  }
  setDocumentId(docId) {
    this.documentId = docId;
  }
}

This class is used as initialState for the following reducer

createSlice({
  name: 'documentLoading',
  initialState: new DocLoading(),
  reducers: {
    setDocumentId(state, { payload }) {
      state.setDocumentId(payload);
    }
  }
})

I see two issues:

• I have to turn serializableCheck off
• when i try to dispatch following action

dispatch({ type: 'documentLoading/setDocumentId', payload: 'documentId1' });

I have got an error from ImmutableStateInvariantMiddleware A state mutation was detected inside a dispatch, in the path: 'documentViewer.documentLoadingMetaData.documentId'. Take a look at the reducer(s) handling the action {"type":"documentViewer/setDocumentId","payload":"doc123"}. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)

Please let me know if I’m doing something wrong or let me few tips how to deal with immerable custom Classes in RTK.

Thx

[Aldeee]

@phryneas you’ve provided valid example. It seems that I had an issue with redux-devtools while trying dispatch an action within it. Thx for clarification. Code works as expected in your’s experiment.

@markerikson could you please explain what is the best place within RTK to use Data Models (ES Classes)? I would like to use it like in the example above. But also I could do this by using in the selector. Is it ok, or could you suggest better place?

const getDocumentLoading = (state) => state.documentLoading;
const documentLoadingSelector = createSelector(
  getDocumentLoading,
  (documentLoading) => new DocLoading(documentLoading)
)

[Aldeee]

@phryneas thx for you reply, I meant createSlice, updated in the first post. I will provide an example a bit later.