Redux toolkit using createAsyncThunk and typescript error handling

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.

phry · Accepted Answer · 2021-12-14 22:39:12Z

2

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
  }
>

answered Dec 14, 2021 at 22:39

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux toolkit using createAsyncThunk and typescript error handling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related