reactjs - Sử dụng mutation của Redux-Toolkit với createAsyncThunk

Tôi muốn tạo một cuộc gọi API đăng nhập từ auth slice. Tôi sử dụng cả Redux-Toolkit (RTK) và RTK Query trong dự án. Tôi muốn sử dụng fetchBaseQuery trong cuộc gọi API. Tôi đã định nghĩa trước baseQuery.

export const baseQuery = retry(fetchBaseQuery({
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    'Access-Control-Allow-Origin': '*',
  },
  prepareHeaders: (headers, { getState }) => {
    const accessToken = localStorage.getItem(AUTH_TOKEN_KEY) || '';
    const uid = getLocal(UID_KEY);
    if (accessToken) {
      headers.set('Authorization', accessToken);
      headers.set(UID_KEY, uid);
    }
    return headers;
  },
}), { maxRetries: 3 });

Kỳ vọng của tôi là sử dụng một đột biến RTK trong authSlice. Tôi đã thử như thế này, nhưng nó không hoạt động.

export const loginAsync = createAsyncThunk(
  'auth/login',
  async (credentials: LoginValuesType, thunkAPI) => {
    try {
      // How to call the mutation here?
      // const response = await userApi.useLoginMutation(credentials)
    
      if (response?.data?.code === 0) {
        localStorage.setItem(AUTH_TOKEN_KEY, response.data?.data?.token);
        setLocal('uid', response.data?.data?.uid);
        return response.data;
      } else if (response?.data?.code === 1) {
        thunkAPI.dispatch(showError(response?.data?.msg))
        return thunkAPI.rejectWithValue({msg: response?.data?.msg})
      }
    } catch (e) {
      thunkAPI.dispatch(showError('An error occurred'))
      return thunkAPI.rejectWithValue({msg: "An error occurred"})
    }
  }
)

Nếu cách này là không thể, xin vui lòng đề xuất cho tôi một cách tốt để tạo kết nối backend này.

Đây là đột biến RTK mà tôi đã thực hiện. Chúng ta có thể loại bỏ nó nếu nó không cần thiết.

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: baseQuery,
  endpoints: (builder) => ({       
    login: builder.mutation({
      query: (args) => {
        return {
          url: '/api/v1/sign_in',
          method: 'POST',
          body: args,
        }
      },
    }),
  }),
});

export const {
  useLoginMutation
} = userApi;

Câu trả lời #1

Bạn có thể khởi tạo một điểm cuối trực tiếp. Ví dụ:

export const loginAsync = createAsyncThunk(
  'auth/login',
  async (credentials: LoginValuesType, thunkApi) => {
    try {
      const { data } = await thunkApi.dispatch(
        userApi.endpoints.login.initiate(credentials);
      );
    
      if (data.code === 0) {
        localStorage.setItem(AUTH_TOKEN_KEY, data.data?.token);
        setLocal('uid', data.data?.uid);
        return data;
      } else if (data.code === 1) {
        const { msg } = data;
        thunkApi.dispatch(showError(msg));
        return thunkApi.rejectWithValue({ msg });
      }
    } catch (e) {
      thunkApi.dispatch(showError('An error occurred'));
      return thunkApi.rejectWithValue({ msg: "An error occurred" });
    }
  }
);