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
🔥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
Rất hay và hữu ích, cảm ơn a có 1 series hay như vậy.
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
chia sẻ rất chi tiết, ủng hộ bạn ra thêm nhiều series
@duocdev
Жыл бұрын
cảm ơn bạn 💓
Hay quá anh ơi
@duocdev
Жыл бұрын
cảm ơn em nha 😁
Series hay quá a ơi, xem khá dễ hiểu, a có dự định làm video về RTK Query k a?
@duocdev
Жыл бұрын
chơi hết em à :))
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
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 ạ
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
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
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
Жыл бұрын
Cảm ơn em nhen 💓
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
Жыл бұрын
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
Em cũng ở ĐN nè anh Được. Anh ở quận nào vậy anh
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
Жыл бұрын
Uh em đúng r đó
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
Жыл бұрын
thunk em à, saga anh thấy quá thừa và thunk là đủ cho hầu hết các tác vụ rồi.
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
Жыл бұрын
Đú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
Жыл бұрын
Dạ em cảm ơn anh ạ. Hôm qua ngồi 2h coi hết video này luôn
40:40
- 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
2 tiếng nhưng mất tận 10 tiếng mới thấm :(
@Spkntei
Жыл бұрын
Tôi thấy cug dễ mà 😅