[Immer] An immer producer returned a new value *and* modified its draft about ngrx-wieder HOT 5 CLOSED

Glad it's resolved. However, immer should be able to handle shallow copies as mentioned on this page:

case "adduser-3":
    // OK: returning a new state. But, unnecessary complex and expensive
    return {
        userCount: draft.userCount + 1,
        users: [...draft.users, action.payload]
    }

Mixing both approaches is apparently the problem which can be hard to track down as mentioned for your case.

from ngrx-wieder.

Hi @julianpoemp, can you show more of your reducer code please and optimally create a reproduction?

Could this be a bug in ngrx-wieder?

Did you try removing ngrx-wieder and still receive the error?

Does it have something to do with the definition of anonymous functions by any chance?

Hm, at a glance, maybe. But I'd be wondering why this problem would only show up now. However, if that's the problem it should be pretty easy to reproduce :)

from ngrx-wieder.

Hi @nilsmehlhorn, thank you for your fast response! I was able to create a minimal working example that reproduces this issue. You can find it here: https://github.com/julianpoemp/ngrx-wieder-immer-bug The README contains further information. Thank you very much for looking into this!

from ngrx-wieder.

I've looked at your app and interestingly enough this line seems to be causing the error (not sure if it's the root cause though): https://github.com/julianpoemp/ngrx-wieder-immer-bug/blob/0556f4fa1e3cc93b462c55681e2a3c69fdfa966e/apps/immer-draft-bug/src/app/store/table.reducer.ts#L177

Changing the value of the type property to a static string makes the error disappear for me. That's really odd as it is only some nested string value.

Overall your reducer isn't really in line with how you'd ideally use immer. You're performing immutable updates via shallow copy instead of mutating the draft - which is fine in theory but you need to be careful not to accidentally do both mutable and immutable updates (i.e. return a new object). However, I don't really see how that particular line would be doing that. Please see here for additional info: https://immerjs.github.io/immer/return

Would you mind trying to refactor at least the action reducer for TableActions.init.success to use the mutable update patterns described here to see if that helps?

Eventually, you're also welcome to provide a pull request with a test case for the issue and a corresponding fix. I don't have loads of capacity for that right now.

from ngrx-wieder.

@nilsmehlhorn thank you very much for your response, that helps me a lot! I was able to fix this as you recommended. At the moment I don't really understand why immer can't handle simple shallow copies:

      state.tools = tools;
      state.projectRoles = projectRoles;

works. But this fails:

      state = {
        ...state,
        tools, projectRoles
      }

So as far as I can understand it's not possible to use shallow copies as soon as I want to use immer. I'll have to read more about immer to understand it.

from ngrx-wieder.