how to fix TypeError: Cannot assign to read only property 'jobTitle' of object '#<Object>'

[Aycom366]

Am having issues updating a redux store in NEXTJS. am building a CV platform with the feature to preview users' input almost immediately into a preview page. this cv platform has the experience, education etc that a normal cv platform should have and am using the react hook form package to manage forms and also to enhance dynamic forms.

so because the preview component will be another project on its own, I need the best way to pass data from my app into the preview app. Then I thought of passing every form input, cv styles, and data to a redux store so the preview component can just get the user's data from the store

as I said earlier, am using the react hooks form library to manage my form, so to update the store in real-time whenever the user inputs anything, I imported the useWatch hook from react hook form to watch my form in case of any data changes. so I set up a useEffect to listen for any useWatch change to dispatch the whole useWatch data to the store. NB: this data contains an array of objects

my challenge right now is that anytime I dispatch the data to store, redux toolkit or probably immer frowns at what am doing and will always break the app, returning back this error message

TypeError: Cannot assign to read only property 'jobTitle' of object '#<Object>'
    at set (index.esm.mjs?b902:507:1)
    at onChange (index.esm.mjs?b902:1749:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4213:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?ac89:4291:1)
    at executeDispatch (react-dom.development.js?ac89:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js?ac89:9073:1)
    at processDispatchQueue (react-dom.development.js?ac89:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js?ac89:9097:1)
    at eval (react-dom.development.js?ac89:9288:1)
    at batchedUpdates$1 (react-dom.development.js?ac89:26140:1)
    at batchedUpdates (react-dom.development.js?ac89:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js?ac89:9287:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js?ac89:6465:1)
    at dispatchEvent (react-dom.development.js?ac89:6457:1)
    at dispatchDiscreteEvent (react-dom.development.js?ac89:6430:1)`

Below is the redux store and how am setting the experience

const initialState: IResume = {
  templatePrimaryColor: "#335384",
  top: 0,
  showOverlay: false,
  cv_object: {
    templateId: 1,
    personalInformation: {} as PersonalInformation,
    experiences: [] as Experience[],
    educations: [] as Education[],
    skills: [] as Skill[],
    awards: [] as Award[],
    certificates: [] as Certificate[],
    publications: [] as Publication[],
    references: [] as Reference[],
  },
};


export const resumeSlice = createSlice({
  name: "resume",
  initialState,
  reducers: {
    setExperience: (state, action: PayloadAction<Experience[]>) => {
      // state.cv_object.experiences = action.payload
       return (state = {
        ...state,
        cv_object: {
          ...state.cv_object,
          experiences: action.payload,
        },
      });
    },
  },
});

Below is how am setting the form and dispatching it

//React hooks form initialSetup
  const { register, control, handleSubmit } = useForm<CvObject>({
    defaultValues: {
      experiences: [{ ...ExperienceDefaultValues }],
    },
  });

  //usefieldArray for dynamic forms
  const { append, fields, remove } = useFieldArray({ control, name: "experiences" });

  //dispatch the entire form data to experience if any changes is being made
  const formValues = useWatch({ control, name: "experiences" });

  const [currentFormIndex, setCurrentFormIndex] = useState(0);

  useEffect(() => {
    if (!useAi) dispatch(hideOverlay());
    else dispatch(showOverlay());
  }, [useAi]);

  useEffect(() => {
    dispatch(setExperience(formValues));
  }, [formValues]);

  const handleAddAnotherExperience = () => {
    setCurrentFormIndex((prev) => prev + 1);
    append({ ...ExperienceDefaultValues });
  };

I'll appreciate any help to fix this issue am facing. Thanks

[markerikson]

Based on that call stack, it looks like whatever form library you're using is trying to directly mutate the data from Redux, which is bad. I don't have an immediate fix/solution, other than check how the library wants to update state, and you may need to make copies of the data to pass that form library.

Also, as an unrelated side note: you don't have to do all those manual spreads in the reducer, and also the line state = whatever is wrong when using Immer. The best way to write that is just state.cv_object.experiences = action.payload.

[Aycom366]

Please don't mind me, I was actually using state.cv_object.experiences before, But when it didn't work I decided to do a deep clone which also is not working.
so the workaround that I did was to stringify the values before setting them to the store and vice-versa