How to partial migrate to react toolkit given current usage of Immutable.js?

Question

I have a large app which uses React, Redux, and Immutable.js. I'd like to migrate to react-toolkit with its createSlice function, which looks really nice. The problem I have is that because of my usage of redux middleware for Immutable (redux-immutable), I am questioning if there's any way to migrate one action/selector/reducer slice at a time? Or if migration means I need to migrate the whole app in one go (which is borderline impossible given the size). In particular redux-toolkit uses Immer internally so I'm feeling like my usage of Immutable.js is fundamentally at odds with react-toolkit's approach. Is there an incremental migration available? If so are there any gotchas or guides that describe how this would work?

Answer 1

Yes, Immer and Immutable.js will likely be at odds with each other, and we specifically recommend using Immer (which is why RTK uses Immer internally by default).

In general, you ought to be able to pick a slice, swap its reducers for RTK's createSlice, and update any places in the UI that depend on interacting with the Immutable.js APIs to work with plain objects instead. (Not saying it's easy, especially if you're using plain JS instead of TS, but it's doable).

I'm not sure what issues you might run into with use of redux-immutable specifically. I'd just recommend trying to pick a slice and migrate it, and see what happens.