reactjs - Redux toolkit createAsyncThunk-ის გამოყენებით და typescript-ის შეცდომების დამუშავება


მე რამდენჯერმე გადავიკითხე დოკუმენტაცია და ვერ ვპოულობ შეცდომას, რომელიც მხდევს დამთრგუნველად.

რემ ოჯახით მე უნდა დავანიშნო შეცდომის ტიპი getAccounts და accountsSlice-ში, მიუხედავად იმისა, რომ დოკუმენტაციაში ეწერა, რომ ეს არ უნდა გამეკეთებინა, თუ გავაგზავნი rejectValue ტიპს და 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
        }
      })
  }
})

დამატებით, როდესაც rejectValue ტიპიზებულია createAysncThunk-ში, მე მივიღე ეს შეცდომა, როდესაც ვცდილობ dispatch(getAccounts)-ის გამოყენებას:

Expected 1 arguments, but got 0.

პასუხი #1

თქვენ უნდა გამოიყენოთ dispatch(getAccounts()), არა dispatch(getAccounts).

ამისთვის საჭიროა არგუმენტი აკრიფოთ როგორც void, და სწორედ აქ არის თქვენი შეცდომა: ჯენერიკ არგუმენტები პოზიციონალურად არის განლაგებული - კონფიგურაციის ობიექტი არის მესამე არგუმენტი, ხოლო მეოთხე არგუმენტი გამოტოვეთ. ამგვარად, თქვენი getAccounts ელოდა არგუმენტს ფორმატში { rejectValue: ServerError }.

თქვენ უნდა მიიღოთ ენა

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