Tất cả mọi thứ bạn cần biết về createAsyncThunk | Hướng dẫn chi tiết về Redux Toolkit Typescript

Chào mọi người, video này chúng ta sẽ tìm hiểu về cách dùng createAsyncThunk trong Redux Toolkit Typescript như thế nào nhé.
Các bạn sẽ được học
- Cách tạo server với json-server
- Ý nghĩa đằng sau việc Strict.Mode trong React ép chúng tạo gọi 2 lần API ở useEffect()
- Cách cancel một request với axios
- Cách cancel một request với createAsyncThunk
- Cách tích hợp loading skeleton với redux
- Cách xử lý lỗi trả về của API khi dùng createAsyncThunk
Hy vọng mọi người đã xem video trước để có thể dễ dàng hiểu được video này 😁
____ Nội dung video ______________
00:00 - Tạo API với JSON Server
07:05 - Tạo environment và test API trên Postman
09:15 - Tạo .gitignore file cho server
09:48 - Cài đặt và cấu hình Axios để gọi API
12:20 - Gọi api get post list trong PostList component. Giải thích tại sao chúng ta không nên gọi API trong reducer
18:06 - Cancel Request trong Axios
28:45 - Tạo action getPostList bằng createAsyncThunk
40:40 - Tạo action addPost bằng createAsyncThunk
46:20 - Tạo action updatePost bằng createAsyncThunk
55:02 - Tạo action deletePost bằng createAsyncThunk
01:00:53 - Xử lý skeleton loading trong React Redux
01:10:35 - Delay response API trả về
01:11:05 - Xử lý request abort làm vô hiệu hóa loading
01:19:25 - Xử lý lỗi trả về từ createAsyncThunk
01:53:47 - Kết thúc
✉️Các bạn có thể tìm mình qua các kênh sau:
✅ Page Được Dev: / duocdevofficial
✅ Facebook cá nhân: / duthanhduoc
✅ Website: duthanhduoc.com/
✅ Email: duthanhduoc@gmail.com
✅ SĐT: 0768 447 467
Github: github.com/duthanhduoc/React-...
🔥Các khóa học của mình:
🧑🏻‍💻 Khóa SUPER REACT - SHOPEE CLONE TYPESCRIPT: duthanhduoc.com/courses/react
🧑🏻‍💻 Và các khóa Javascript, NodeJs,... sắp tới sẽ có nhé, các bạn cứ follow fanpage hoặc website mình để có được thông tin sớm nhất mỗi khi mình có thông báo
#duocdev #duthanhduoc #reactjs #typescript #createAsyncThunk #jsonserver

Пікірлер: 29

  • @duocdev
    @duocdev Жыл бұрын

    🔥Khóa học Super React - Shopee Clone Typescript cực xịn xò của mình, anh em có thể xem chi tiết tại đây duthanhduoc.com/courses/react ✉Các bạn có thể tìm mình qua các kênh sau: ✅ Page Được Dev: facebook.com/duocdevofficial ✅ Facebook cá nhân: facebook.com/duthanhduoc/ ✅ Website: duthanhduoc.com/ ✅ Email: duthanhduoc@gmail.com ✅ SĐT: 0768 447 467

  • @nghichngom20
    @nghichngom20 Жыл бұрын

    Rất hay và hữu ích, cảm ơn a có 1 series hay như vậy.

  • @darklord11269
    @darklord11269 Жыл бұрын

    series này của Được Dev đỉnh thật sự, mình học chuyển ngành nên cái này vô cùng hữu ích

  • @dangtapta
    @dangtapta Жыл бұрын

    chia sẻ rất chi tiết, ủng hộ bạn ra thêm nhiều series

  • @duocdev

    @duocdev

    Жыл бұрын

    cảm ơn bạn 💓

  • @tonthong477
    @tonthong477 Жыл бұрын

    Hay quá anh ơi

  • @duocdev

    @duocdev

    Жыл бұрын

    cảm ơn em nha 😁

  • @west1609
    @west1609 Жыл бұрын

    Series hay quá a ơi, xem khá dễ hiểu, a có dự định làm video về RTK Query k a?

  • @duocdev

    @duocdev

    Жыл бұрын

    chơi hết em à :))

  • @AnhPham-mj1uo
    @AnhPham-mj1uo Жыл бұрын

    hồi h em làm là nếu gọi api cho 1 component đó thì dùng useEffect , nếu gọi api cho 2 3 component ms dùng createAsyncThunk, vậy đúng k anh hay dùng createAsyncThunk hết a

  • @NguyenTuan-pu7ye
    @NguyenTuan-pu7ye Жыл бұрын

    Cho e hỏi tại sao lúc em clone về thì nó báo lỗi ở phần return code của mỗi file jtx ạ

  • @TranThanhHoang-BDCVT
    @TranThanhHoang-BDCVT6 ай бұрын

    series rất hay nhưng mà chắc phải mất 1 tuần để cày vì kiến thức khá sâu

  • @phantrungkien3049
    @phantrungkien30492 ай бұрын

    Nếu có nhiều slice thì cái requestID của từng slice giống nhau thì có hậu quả gì ko anh

  • @ucleviet3782
    @ucleviet3782 Жыл бұрын

    Wow😻, một video mà học được rất nhiều cái mới. Cảm ơn anh rất nhiều vì đã chia sẻ những kiến thức bổ ích như thế này

  • @duocdev

    @duocdev

    Жыл бұрын

    Cảm ơn em nhen 💓

  • @vuongqtvn
    @vuongqtvn Жыл бұрын

    Hay anh ơi mà em hỏi phân biệt nhiều loading trong 1 slice để lấy ra dùng cho đúng như kiểu loading của update create delete get riêng để tiện xử lý UI thì mình làm cách set loading thông thường thì nó hơi dài còn cách anh đang làm có cách nào để phân biệt nó không

  • @duocdev

    @duocdev

    Жыл бұрын

    Nếu chỉ dùng cho mỗi component thì em setLoading state trong component thôi em, chỉ cần quan tâm lúc bắt đầu request và final thôi. K cần phải quan tâm thành công hay thất bại

  • @KuNhiRonaldo
    @KuNhiRonaldo Жыл бұрын

    Em cũng ở ĐN nè anh Được. Anh ở quận nào vậy anh

  • @somebody-17546
    @somebody-17546 Жыл бұрын

    A cho em hỏi với . Trường hợp khi người dùng ấn tạo post em muốn trong lúc đợi thì hiện thị cái button có nút xoay xoay thì làm giống xử lý cái error phải không. Thêm 1 cái state isLoading để check 🙄🙄

  • @duocdev

    @duocdev

    Жыл бұрын

    Uh em đúng r đó

  • @giangngo3503
    @giangngo3503 Жыл бұрын

    cho em hỏi xài redux toolkit thì nên xài thunk này hay xài saga là tối ưu ạ

  • @duocdev

    @duocdev

    Жыл бұрын

    thunk em à, saga anh thấy quá thừa và thunk là đủ cho hầu hết các tác vụ rồi.

  • @Ateens97
    @Ateens97 Жыл бұрын

    Anh ơi cho em hỏi sau khi mình add, edit, delete thì tại sao mình không getPost lại mà mình chỉnh postList ở local ạ

  • @duocdev

    @duocdev

    Жыл бұрын

    Đúng là getPost sẽ tiện & dễ hơn nhưng anh làm thế để các bạn học được nhiều hơn đó em. Mấy video về React Query hay RTK query sau anh getpost lại đó

  • @Ateens97

    @Ateens97

    Жыл бұрын

    Dạ em cảm ơn anh ạ. Hôm qua ngồi 2h coi hết video này luôn

  • @hyphamne
    @hyphamne Жыл бұрын

    40:40

  • @QuanNguyen-wc2hm
    @QuanNguyen-wc2hm Жыл бұрын

    - createAsynchThunk tạo ra những action success, fail xử lý này nọ cho chúng ta để chúng ta tập trung xử lý logic - nhận vào 1 cái type prefix, tham số thứ 2 là async callback và return lại dữ liệu - khi createAsyncThunk đc dispatch nó sẽ tạo ra 1 cái action /pending thành công /fulfilled thất bại /rejected

  • @hyphamne
    @hyphamne Жыл бұрын

    2 tiếng nhưng mất tận 10 tiếng mới thấm :(

  • @Spkntei

    @Spkntei

    Жыл бұрын

    Tôi thấy cug dễ mà 😅

Келесі