Type errors when extraReducers _after_ reducers in createSlice

[GYatesIII]

Description

Under specific conditions, detailed below, some slices are typed with a WritableDraft wrapper. All objects within that slice are also wrapped. This causes type errors in consumers that are expecting the unwrapped types of slices & slice values.

Repro

Minimal repro repo:
https://github.com/GYatesIII/rtk-extra-reducers-issues

From my testing, I identified the specific conditions for repro:

1. Use latest @reduxjs/toolkit (1.8.6) - I also observed the same behavior in 1.6.2 & 1.7.2
2. TypeScript (I repro'd in both 4.7.4 & 4.8.4)
3. Have TSConfig compilerOptions.strictFunctionTypes set to false
4. Have a slice that has a reducer that accesses state param
5. Have a slice that has an extra reducer function that access builder param
6. Have the slice options define the extra reducer function key AFTER the reducer object

[GYatesIII]

Others have run into this in the wild as well: https://stackoverflow.com/questions/72420654/redux-toolkit-extrareducers-listed-after-reducers-causes-issues-ts2322-error

[markerikson]

Thanks for the repro and the investigation!

My first thought is that we have to assume that users have all "strict"-type options turned on, so there may not be something we can actually do on our end.

[GYatesIII]

Honestly, I think that's a fair stance to take, strict is best-practices. But in recognition of that stance, it should be noted obviously in the docs. Probably on this page: https://redux-toolkit.js.org/usage/usage-with-typescript

[brendanmc6]

Found a solution: https://stackoverflow.com/a/74468642/4458849

[okcoker]

My first thought is that we have to assume that users have all "strict"-type options turned on, so there may not be something we can actually do on our end.

In my case I was testing out RTK using a next.js example so the strictFunctionTypes option was completely omitted (although I've submitted a PR in light of this issue)

It should be noted obviously in the docs. Probably on this page: https://redux-toolkit.js.org/usage/usage-with-typescript

Agreed. I went through the docs as I wanted to try and find out about some odd behavior happening with typings of WritableDraft<T> vs T when using useAppSelector. I eventually found that for a given state, T, it seemed to only be WritableDraft<T> when I was populating the reducers option within createSlice, but would be T otherwise. I still wasn't getting correct typing on nullable state fields though but this was all highlighted as expected after adding strict: true to the tsconfig.

[phryneas]

@okcoker yeah, unfortunately next should generally come with a warning label. The TS team intends strict to be the default for every new project, but for some reason, next has been avoiding this for years.