Redux 工具包使用 createAsyncThunk 和 typescript 错误处理

Question

I have re-read the documentation a few times and can't seem to figure out an error I'm receiving.

For some reason I need to define the error type in getAccounts and accountsSlice , even though in the documentation it says I shouldn't if I pass rejectValue type and return rejectWithValue(error as ServerError) .

interface ServerError {
  statusCode: number
  description: string
}

export const getAccountsSlice = createAsyncThunk<
  GetAccountsState,
  {
    rejectValue: ServerError
  }
>('accountsSlice/getAccounts', async (_, { rejectWithValue }) => {
    try {
      // handle fulfillment
    } catch (error) {
      console.error('REQUEST ERROR --', error)
      return rejectWithValue(error as ServerError)
    }
  }
)

export const accountsSlice = createSlice({
  name: 'accountsSlice',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getAccountsSlice.pending, (state) => {
         ...
      })
      .addCase(getAccountsSlice.fulfilled, (state, action) => {
         ...
      })
      .addCase(getAccountsSlice.rejected, (state, action) => {
        return {
          ...state,
          // must add as ServerError or I get an error
          error: action.payload as ServerError,
          isLoading: false
        }
      })
  }
})

In addition, having rejectValue typed in createAysncThunk I get this error when trying to dispatch(getAccounts) :

Expected 1 arguments, but got 0.

Answer 1

You should dispatch(getAccounts()) , not dispatch(getAccounts) .

For that you need to type the argument as void , and that is also where your error is: Generic arguments are positional - the config object is the third argument and you omitted the second. That way, your getAccounts expected an argument in the form { rejectValue: ServerError } .

You need to type it

export const getAccountsSlice = createAsyncThunk<
  GetAccountsState,
  void,
  {
    rejectValue: ServerError
  }
>