0

My redux toolkit / immer slice is doing a mutation, but that is allowed, why am i getting the mutation was detected error? Is it my reducer?

Error: Invariant failed: A state mutation was detected between dispatches, in the path 'components.component_159275.input.options'.  This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)

reduxDispatch(updateValue({ componentId, value }));

export const componentsSlice = createSlice({
  name: 'COMPONENTS',
  initialState: defaultState.components,
  reducers: {
    updateValue(state, action) {
      const { payload } = action;
      const { componentId, value } = payload;
      state[`component_${componentId}`].component.input.value = value;
    },
  },
});

I have this rule, in eslintrc to allow param reassign, is there a rule i am missing that i need to add?

    "no-param-reassign": [ // allows us to reassign where the param which is used in that is state or ctx.
      "error",
      { "props": true, "ignorePropertyModificationsFor": ["state", "ctx"] }
    ],

Thank you for you help.

Jeremy
  • 1,170
  • 9
  • 26
  • Interesting. Can you put a breakpoint in `updateValue` and check the type of `state`? And how do you import/export the action creator `updateValue` that you use in the `dispatch` line? – Guillaume Brunerie Oct 07 '22 at 16:29
  • Also eslint has nothing to do with the error, what you are getting is a runtime error. – Guillaume Brunerie Oct 07 '22 at 16:30
  • What is `component` here? What kind of value is it? Where is it coming from when it's added to the state? – markerikson Oct 07 '22 at 23:50
  • @GuillaumeBrunerie - I don't have a debugger in vscode as its frontend side of a dockerized project which i / my lead wasn't able to create a launch file for. - Logging the action shows the expected payload, i can't log state. - updateValue is a named import where it is used, it console logs prior to the dispatch, but the error occurs at invocation of the function. – Jeremy Oct 10 '22 at 08:19
  • @markerikson component is a react form input component, they vary, but there is always an input value hence this reducer. – Jeremy Oct 10 '22 at 08:25
  • @Jeremy : if you're saying that's a literal DOM node, **DON'T DO THAT! You must _never_ put DOM nodes or other non-serializable values into Redux!** https://redux.js.org/style-guide/#do-not-put-non-serializable-values-in-state-or-actions – markerikson Oct 10 '22 at 16:08
  • @markerikson no no, its not literally a dom node, its data for a react input component serialized by id i.e. component.input.value is value for a component which gets built in the app (depending on component.type... i.e. textfield / radio etc) - data for values come from a backend via a gateway and we have an array of these values in redux. Its pretty complex. – Jeremy Oct 10 '22 at 17:17
  • The original error message says that it's a `.input.options` field that got mutated - I would recommend checking where you access that `.options` field. – markerikson Oct 11 '22 at 23:48

0 Answers0