Type 'CaseReducerWithPrepare' constrains its generic

[8times12]

On typings.d.ts file of @redux/toolkit, a generic Action of type CaseReducerWithPrepare extends type PayloadAction with default generics and constrains its method prepare to return void. However, a method prepare of a payload action seems able to return any. Does this type declaration fit the entity of the API?

PayloadAction:

export declare type PayloadAction<P = void, T extends string = string, M = never, E = never> = {
    payload: P;
    type: T;
} & ([M] extends [never] ? {} : {
    meta: M;
}) & ([E] extends [never] ? {} : {
    error: E;
});

CaseReducerWithPrepare:

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

It looks like <any> is required after Action extends PayloadAction.

[phryneas]

With all the possible ways to type that there, there's unfortunately no possible way to infer that correctly.

Instead, we are first allowing some pretty permissive types to enter almost everything and then use

export type ValidateSliceCaseReducers<
  S,
  ACR extends SliceCaseReducers<S>
> = ACR &
  {
    [T in keyof ACR]: ACR[T] extends {
      reducer(s: S, action?: infer A): any
    }
      ? {
          prepare(...a: never[]): Omit<A, 'type'>
        }
      : {}
  }

to make sure that the returned partial action of prepare and the action of the reducer are actually compatible.

This requires for the action parameter in reducer to be typed while it allows the return value of prepare to be either typed implicitly or explicitly - as long as the types are compatible.

For a usage example, see https://redux-toolkit.js.org/usage/usage-with-typescript#defining-action-contents-with-prepare-callbacks

If you have any specific situations where that doesn't work, let us know.

Also, all that is probably getting a lot easier once we get #637 on the road, as then you'll have an alternative notation like

createSlice({
  name,
  initialState,
  reducers: create => ({ // callback form
    fetchTodos: create.asyncThunk(
      todosAPI.fetchTodos,
      {pending, fulfilled, rejected} // thunk reducers here
    ),
    toggleTodo(state, action: PayloadAction<string>) { // "normal" reducer in this object
      state[index].completed = !state[index].completed;
    },
    addTodo: create.preparedReducer( // this will be much better typed
      (text) => ({payload: {text, id: nanoid()}}),
      (state, action) => void state.push(action.payload);
    )
  })

which infers a lot more.

[8times12]

Thank you for your kind explanation. Thank you for your kind explanation. It has been resolved.
I am looking forward to the completion of #637.