Extracting a CaseReducerWithPrepare causes typescript errors

[jparkrr]

Thanks for the great library!

Very possible I'm missing something here, but I can't get past this typescript error when I try to clean up the case reducers in createSlice by extracting a CaseReducerWithPrepare.

It works fine if it's just a CaseReducer.

I've reproduced the error in this example:
https://codesandbox.io/s/casereducerwithprepare-error-9ozw2?file=/src/store/todos.ts

[phryneas]

That type is only used to restrict what you can pass into createSlice, but not sufficient on it's own (for example, it contains no information on the arguments on prepare) - so you cannot use it that way.

Afaik you are the first person to ever try that - and we just don't ship a type for it.

So you'd just type it as

const addTodo = {
  reducer: (state: Todo[], action: PayloadAction<string>) => {
    state.push({ id: uuid(), message: action.payload, completed: false });
    return state;
  },
  prepare: (payload: string) => {
    return { payload };
  }
};

or create your own type.

[jparkrr]

Thanks for following up! IMO providing a type for this would make sense (just like the example of a normal CaseReducer), but maybe usage of prepare is rare enough that it isn't needed.

I'll explore creating my own type. Thanks again.

[nifanic]

Still, the type problem exists. If you suggest to "bypass" the use of CaseReducerWithPrepare, either—

• remove it completely from types, or
• make it working.

I've managed the error to go by this simple fix—

// @reduxjs/toolkit/dist/createSlice.d.ts

export declare type CaseReducerWithPrepare<State, PayloadAction> = {
    reducer: CaseReducer<State, PayloadAction>;
    prepare: PrepareAction<Action['payload']>;
};

No reason to extend PayloadAction, just use it.

Can raise PR if needed.

[phryneas]

It's not that simple: this type is necessary for internal type narrowing and type inference, as it is. Having it exported is merely a side effect of it's actual purpose

It is by itself never enough to describe a full case reducer with prepare, as it only has two generic arguments and those generic arguments do not describe the arguments that would go into the final function created by it.

As a consequence, any action described would probably end up with an action creator without arguments.

Just removing an extends clause (which removes a requirement for type narrowing and makes this type completely anonymous without any correlation to the similarly named type PayloadAction) does not make it usable.

Exporting it at this stage was probably an error at the time, but nothing we can undo until we release a breaking 2.0 and remove obsolete exports.

Fixing it is not as easy as it seems. Also, any change of these types could break hundreds of applications, so this fix would need a lot of tests of different scenarios - as it would require changes to other core types.

I think a fix for this might look something like

diff --git a/packages/toolkit/src/createAction.ts b/packages/toolkit/src/createAction.ts
index ccc9a1d..3ac60ff 100644
--- a/packages/toolkit/src/createAction.ts
+++ b/packages/toolkit/src/createAction.ts
@@ -44,11 +44,11 @@ export type PayloadAction<
  *
  * @public
  */
-export type PrepareAction<P> =
-  | ((...args: any[]) => { payload: P })
-  | ((...args: any[]) => { payload: P; meta: any })
-  | ((...args: any[]) => { payload: P; error: any })
-  | ((...args: any[]) => { payload: P; meta: any; error: any })
+export type PrepareAction<P, Args extends any[] = any[]> =
+  | ((...args: Args) => { payload: P })
+  | ((...args: Args) => { payload: P; meta: any })
+  | ((...args: Args) => { payload: P; error: any })
+  | ((...args: Args) => { payload: P; meta: any; error: any })
 
 /**
  * Internal version of `ActionCreatorWithPreparedPayload`. Not to be used externally.

diff --git a/packages/toolkit/src/createSlice.ts b/packages/toolkit/src/createSlice.ts
index 91408c3..a00c051 100644
--- a/packages/toolkit/src/createSlice.ts
+++ b/packages/toolkit/src/createSlice.ts

@@ -141,9 +137,13 @@ createSlice({
  *
  * @public
  */
-export type CaseReducerWithPrepare<State, Action extends PayloadAction> = {
+type CaseReducerWithPrepare<
+  State,
+  Action extends PayloadAction<any>,
+  Args extends any[] = []
+> = {
   reducer: CaseReducer<State, Action>
-  prepare: PrepareAction<Action['payload']>
+  prepare: PrepareAction<Action['payload'], Args>
 }
 
 /**
@@ -154,7 +154,7 @@ export type CaseReducerWithPrepare<State, Action extends PayloadAction> = {
 export type SliceCaseReducers<State> = {
   [K: string]:
     | CaseReducer<State, PayloadAction<any>>
-    | CaseReducerWithPrepare<State, PayloadAction<any, string, any, any>>
+    | CaseReducerWithPrepare<State, PayloadAction<any, string, any, any>, any[]>
 }
 
 /**

But validating that thoroughly would take up hours, probably dozens of them.

If you want to do that and add a lot of test cases to the packages/toolkit/src/tests/createSlice.typetest.ts, it might be accepted, but be warned:
This is a very delicate part of the sources, comes usually with lots of frustration (every change here has to work over 5 TS versions, which I did not test as of just now) and at the end I might decide that it's just not worth it and just deprecate the type instead (removing it won't be possible until a 2.0)

[nifanic]

Thanks for such a detailed answer.

I like the proposed changes; it also types prepare args.
Will take a look into tests.

[Blackxes]

Heyho, just wanted to ask if this issue will ever be addressed?

Issue appears to be closed without any further information on it and it looks like a solution was already suggested

[markerikson]

@Blackxes Re-reading this issue 4 years after it was closed, I'm not seeing anything actionable here. (Also, the original CodeSandbox repro appears to be dead, so I can't even see what the OP was trying to do or what the error was.)

Beyond that: the issue was closed 4 years ago, so no, there's no plans to "address" it - that's why it was closed :) Totally not on our radar as a result.

But also also, we've made a ton of changes to the RTK types since then, so whatever the original problem was could easily be gone by now.

If you're seeing a specific problem, please open up a new issue with a repro.

[Blackxes]

@markerikson Thank you for the very quick response!

The problem is still present as it was the reason I found this threat in the first place.

Type '{ payload: <your_defined_action>; type: string; }' does not satisfy the constraint '{ payload: void; type: string; }'

I can create a mvp snippet which describes this issue. It seems to only be a type related problem and has no other implications.
Though considering the 4 years in which no one tried to create a reducer with CaseReducerWithPrepare or just accepted the error or other tells me it may not be worth it

[EskiMojo14]

it's a bit of a migration, but I think the create callback form for reducers makes extraction easier:

const postReducers = (create: ReducerCreators<PostState>) => ({ 
  postAdded: create.preparedReducer(
    (post: Omit<Post, "id">) => ({ payload: { ...post, id: nanoid() } satisfies Post }),
    (state, { payload }) => {
      state.posts.push(payload)
    }
  )
})  

const postSlice = createSlice({
  initialState: { posts: [] } satisfies PostState as PostState,
  reducers: (create) => ({
    ...postReducers(create),
    deletePost: create.reducer<string>((state, { payload }) => {
      state.posts = state.posts.filter((post) => post.id !== payload)
    }),
  },
})

const { postAdded, postDeleted } = postSlice.actions