How to define Typescript types for action creators with multiple arguments?

[uhef]

This is probably straight forward, but I've been lost in reading Typescript type definitions of createSlice a little while now and don't seem to find a solution.

Problem is that I've introduced a reducer with prepare function in createSlice that takes two argument (a string and a boolean) and it seems that the action creator function generated by createSlice has a type that only expects one argument. Thus the Typescript compiler whines and I would like to fix that. Ignoring ts errors does the job but I would really like to have the action creator to have correct types thus this really does not satisfy.

Example:

export type TodoState = {
  [keys: string]: {status: string}
}

const slice = createSlice<TodoState, SliceCaseReducers<TodoState>, string>({
  name: 'todos',
  initialState: {},
  reducers: {
    todoReceived: {
      reducer(state, action: PayloadAction<string, string, never, boolean>) {
        const todoId = action.payload;
        if (action.error) {
          return {
            ...state,
            [todoId]: { status: 'oh-no' }
          }
        }
        return {
          ...state,
          [todoId]: { status 'ok' }
        }
      },
      prepare(id: string, error: boolean) {
        return {
          payload: id,
          error
        };
      }
    }
  },
});

// If I use the resulted action creator later like this, Typescript states 'Expected 1 arguments, but got 2':

slice.actions.todoReceived('id-123', true);

I think I should somehow make the 'todoReceived' action creator type explicit but I have no idea how to achieve this. Any ideas?

[markerikson]

Hmm. As a first issue, you shouldn't be actually specifying the generic args to createSlice like that. All of its generic arguments should be inferred. Instead you should be declaring the type of initialState:

https://redux-toolkit.js.org/tutorials/typescript#define-slice-state-and-action-types

(also as a side note, you can "mutate" the state inside the reducer instead of returning spreads.)

Similarly, your PayloadAction would normally only have a single generic type arg, for the actual payload field itself, although in this case since you're trying to provide the error field it might require more.

I'm actually still a bit unsure how the prepare function and the reducer sync up their types - I don't know if the action gets 100% inferred from prepare, or if you still have to specify things yourself. @phryneas , how's this work here?

[phryneas]

You have to define the PayloadAction in the reducer and return something fitting from the prepare method. Inference is not possible at that point, unfortunately.

[markerikson]

Gotcha. We probably should document that.

[phryneas]

export type TodoState = {
  [keys: string]: {status: string}
}

-const slice = createSlice<TodoState, SliceCaseReducers<TodoState>, string>({
+const slice = createSlice({
  name: 'todos',
-  initialState: {},
+  initialState: {} as TodoState,
  reducers: {
    todoReceived: {
      reducer(state, action: PayloadAction<string, string, never, boolean>) {
        const todoId = action.payload;
        if (action.error) {
          return {
            ...state,
            [todoId]: { status: 'oh-no' }
          }
        }
        return {
          ...state,
          [todoId]: { status 'ok' }
        }
      },
      prepare(id: string, error: boolean) {
        return {
          payload: id,
          error
        };
      }
    }
  },
});

something like this should work. Never assign generics for createSlice.

[uhef]

Yes, indeed!

This works great. Thanks for the help and swift reaction! 👍

Perhaps what happened was that specifying SliceCaseReducers<TodoState> type explicitly actually prevented creation of action reducers with correct type.

[phryneas]

if you specify that, you cast it to a super generic slice that just has all the action creators - but none of them is specifically typed