如何在 redux-toolkit 中正确使用带有元类型的 PayloadAction？

Question

Simplified example

 import { createSlice, PayloadAction } from '@reduxjs/toolkit'; type Cake = { flavor: string; size: 'S' | 'M' | 'L'; }; const initialState: { all: Cake[]; meta: { currentPage: number } } = { all: [], meta: { currentPage: 0, }, }; const cakeSlice = createSlice({ name: 'cake', initialState, reducers: { fetchAll( state, action: PayloadAction<Cake[], string, { currentPage: number }>, ) { state.all = action.payload; state.meta = action.meta; }, }, }); export default cakeSlice;

I am getting these errors.

Type '
(state: {
    all: {
        flavor: string;size: "S" | "M" | "L";
    } [];meta: {
        currentPage: number;
    };
}, action: PayloadAction < Cake[], string, {
    currentPage: number;
}, never > ) => void ' is not assignable to type '
CaseReducer < {
    all: Cake[];meta: {
        currentPage: number;
    };
}, {
    payload: any;type: string;
} > | CaseReducerWithPrepare < {
    all: Cake[];meta: {
        currentPage: number;
    };
}, {
    payload: any;type: string;
} > '

Type '
(state: {
    all: {
        flavor: string;size: "S" | "M" | "L";
    } [];meta: {
        currentPage: number;
    };
}, action: PayloadAction < Cake[], string, {
    currentPage: number;
}, never > ) => void '
is not assignable to type 'CaseReducer<{ all: Cake[]; meta: { currentPage: number; }; }, { payload: any; type: string; }>'.
Types of parameters 'action'
and 'action'
are incompatible.
Type '{ payload: any; type: string; }'
is not assignable to type 'PayloadAction<Cake[], string, { currentPage: number; }, never>'.
Property 'meta'
is missing in type '{ payload: any; type: string; }'
but required in type '{ meta: { currentPage: number; }; }
'.

Answer 1

The default behaviour of RTK is to create an action creator with only one argument and only a payload property. This behaviour cannot be modified by TS annotations, because TS annotations have no effect on runtime behaviour.

You can use the prepare notation to define a function that overrides this default behaviour. This function has the same signature & behaviour as the prepare argument for createAction , so you can find most of the relevant documentation there.

In your specific case, you'd want something along the lines of

const cakeSlice = createSlice({
  name: 'cake',
  initialState,
  reducers: {
    fetchAll: {
      reducer(
        state,
        action: PayloadAction<Cake[], string, { currentPage: number }>
      ) {
        state.all = action.payload
        state.meta = action.meta
      },
      prepare(payload: Cake[], currentPage: number) {
        return { payload, meta: { currentPage } }
      }
    }
  }
})

Here it is as a typescript playground