Redux Thunk - Middleware trong Redux Toolkit (2022)

[@KienNguyen-mo3we]

hay a

[@vovanhung9406]

sao mk khong update duoc nhi? trang thai cua completed van la false sau khi tich vao nhi?

[@studyspace5287]

chỉ 30 video đã đạt 10N subs thì hiểu đẳng cấp tới đâu rùi.

[@duyanh6909]

Thấy anh đăng video mới vô like liền :vv cảm ơn anh vì những video bổ ích

[@holetex]

Cảm ơn em nhé

[@KhangNguyen-kq2iw]

video xịn xò anh ơi, anh Tùng ít ra video mà ra là toàn trên 1h học đã luôn anh ơi kkk, mong sắp tới anh ra nhiều video bổ ích hơn nữa, rất thích cách truyền đạt của anh

[@holetex]

Cảm ơn Khang nhiều nhaa

[@vantinhduong8965]

Video rất hay và dễ hiểu. Cám ơn anh nhiều!

[@kynm13]

Cảm ơn anh vì video rất hay và bổ ích

[@dungnguyenhuu4566]

thằng createAsyncThunk thì nó có phải là giống với cái thunk action trong video không anh? mong anh trả lời ạ

[@quangtrieu2998]

Anh giải thích rất có tâm!

[@trantoanthang1731]

anh ơi anh làm về rudux-saga được không ạ

[@CongNguyen-nc4mv]

Quá bổ ích

[@LongNguyen-bt6di]

Nhờ a mà e giải quyết được cách sử dụng redux thunk + toolkit mà phải nhét vào đống stateful component. Thanks vid a nhiều

[@egnaro5536]

Tuyệt vời quá anh ơi, em tối qua mới dính bug reduxThunk cái anh ra video này giúp em hiểu ra rất nhiều ạ. Em cảm ơn và chúc anh luôn khỏe mạnh để ra thêm nhiều video giúp đỡ cho các bạn hơn nha anh ^^

[@holetex]

Cảm ơn em nhé 😍

[@congkon5493]

Mn có ai đã deploy dc project này chưa ạ. Mjh deploy trên netlify và vercel đều bị lỗi nhưng fix mãi ko dc ạ

[@quocchien6414]

chờ mãi a ơi. cám ơn a.

[@holetex]

Cảm ơn em đã ủng hộ anh ❤️

[@juhandvan]

Video hay quá anh ơi =)) Klq cơ mà quả mắt anh trông ảo thật đấy =))

[@holetex]

Kk cảm ơn em

[@nguyenAudio77]

Cảm ơn anh!

[@holetex]

Thanks em 😍

[@cauchuyennhanquanghiepbao]

Sao khi update k call lại để lấy lại list todos mà phải đi sửa ở FE store vậy a

[@minhtaingo9182]

Cảm ơn anh, video dễ hiểu và chi tiết lắm ạ🥰🥰, nhưng dài 1h mấy xem hơi phê 😄😄

[@vantinhduong8965]

Làm thêm video với Redux-Saga đi a

[@nguyenngochai0z]

chờ anh hơi lâu

[@nhathao69]

Mong anh làm về react query nữa ạ . thư viên đó làm tăng performance hay quá

[@tinhphamngoc9878]

1:25:06 Em thầy nó chưa update lại state, khi mình click vào completed

[@longnguyentrong5959]

Cảm ơn anh vì bài giảng mà em đang cần

[@minhtoast817]

W video

[@tieubinhlai-lg7px]

Cho em hỏi chỗ update cuối video lúc tìm find thì chỗ action là obj nên viết let currentTodo = state.todos.find((todo) => todo.id == action.payload.id); như thế này có đúng không nhỉ, không phải là action.payload

[@chainshin2285]

Đúng bạn ơi, chắc viết vội nên anh ấy k để í đấy,

[@DiiKhanh]

cho em hỏi đoạn gần cuối chỗ addNewTodo em return về newTodo mà không convert sang như vậy có được không ạ

[@ngthuongnguyen9804]

A ơi cho em hỏi ý nghĩa của dòng: body: JSON.stringify(newStaff) " là gì ạ

[@phamnhutofficial]

mục đích là gửi dữ liệu của cái newStaff lên server á bạn

[@tuannguyenvananh4985]

Tuyệt vời anhh ơi

[@nguyenquocan8949]

hóng anh ra clip làm project với reactjs tiếp

[@thomenguyen1616]

Cảm ơn anh! Em cũng đang học react-redux mà rối cả đầu. Xem video của anh vỡ ra rất nhiều điều. Cảm ơn anh rất nhiều ạ!

[@baoien5520]

cho e hỏi mình nên dùng try...catch trong hàm createAsyncThunk hay dùng ở ngoài component khi dispatch để handle error v a

[@toanta4838]

theo mình thấy dùng try, catch tạo riêng ra 1 action, thì k cần dùng redux thunk nữa. Người ta h cx chỉ dùng reduxSaga cho dự án lớn thì phải

[@CuongLePianoCover]

làm video về redux toolkit và redux saga đi pro

[@HaiNguyen-jg5vj]

Cảm ơn anh nhiều ạ, em có câu hỏi là sao anh không dùng json server tạo fake api cho nhanh ạ? Chúc anh sức khoẻ

[@HaiNguyen-jg5vj]

Mong anh ra thêm video về redux saga nữa ạ

[@datcq13021984]

Video rất hay và dễ hiểu. Bạn có thể làm thêm video về Redux-Saga được ko ?

[@amanda2348-g9j]

a làm thêm về redux persist nữa nha a 😚

[@ucoan8339]

video dễ hiểu lắm ạ. Anh có thể làm thêm video về redux saga đc k ạ

[@trannhan7632]

cảm ơn anh

[@holetex]

Cảm ơn em 😍

[@ngabui1275]

Mong a làm video về lắng nghe sự kiện trên sever, khi dữ liệu trên sever thay đổi thì sẽ tự động update lại dữ liệu có trong store

[@ninhngocnam3036]

cái này xử lý sao b, có động gì đến realtime không?

[@nguyenvanchung3940]

Tuyet voi

[@somebody-17546]

Anh làm redux-saga đi anh :"

[@namtruonghoang329]

Mình có 1 thắc mắc là khi tạo createAsyncThunk(type,...) tham số nơi chỗ type phải đặt tên theo cú pháp như thế nào ? Mình thấy trong video anh hướng dẫn ở file todosSlice.js có name:"todoList" nhưng tham số nơi hàm thunk thì đặt là todos/ . Mong anh giải đáp

[@manhvu9998]

file export defaut, muốn đặt tên gì cũng đc, vì nó vẫn export defaut hàm đó. Nó giống kiểu tên tham số

[@amanda2348-g9j]

53:04 nếu em viết luôn đoạn xử lý bất đồng bộ vào hàm addTodos này thì cũng được mà nhỉ, call api xong rồi dispatch thằng action addTodo là xong? Như vậy sẽ không cần đến thằng createAsyncThunk và phải sử dụng extraReducer nữa. Dùng thêm em thấy rắc rối thêm khá nhiều. Nhưng mà dùng createAsyncThunk mục đích là để nó tách biệt các trạng thái pending, fulfilled rồi mình có thể dựa vô trạng thái đang pending đó để thêm hiệu ứng loadding anh nhỉ?

[@hieuminh2809]

hi anh, e có cùng câu hỏi, ko bik anh có đáp án chưa nhỉ, giải thích cho e với ạ, e cảm ơn

[@xiu633]

@@hieuminh2809 Đúng, bạn có thể viết luôn xử lý bất đồng bộ trong hàm `addTodo` và gọi API trong đó, sau đó dispatch action `addTodo` khi đã nhận được kết quả từ API. Tuy nhiên, việc sử dụng `createAsyncThunk` giúp bạn quản lý trạng thái của tác vụ bất đồng bộ một cách tốt hơn và cung cấp khả năng xử lý các trạng thái `pending`, `fulfilled`, và `rejected` một cách tự động. Lợi ích của việc sử dụng `createAsyncThunk` bao gồm: 1. **Quản lý trạng thái dễ dàng:** Bạn không cần phải tự quản lý các trạng thái `pending`, `fulfilled`, và `rejected`. Redux Toolkit tự động theo dõi và cập nhật chúng cho bạn. 2. **Khả năng xử lý hiệu ứng và tương tác người dùng:** Bạn có thể tận dụng các trạng thái `pending` để hiển thị hiệu ứng "loading" hoặc tương tác người dùng khác một cách dễ dàng. 3. **Mã nguồn dễ đọc hơn:** Redux Toolkit giúp giảm bớt boilerplate code và làm cho mã nguồn dễ đọc hơn, giúp tăng tính bảo trì và khả năng làm việc đồng đội. Nếu bạn viết mã mà không sử dụng `createAsyncThunk`, bạn sẽ phải tự quản lý trạng thái, xử lý lỗi và hiệu ứng loading một cách thủ công, điều này có thể dẫn đến mã nguồn phức tạp và khó bảo trì hơn.

[@luckidtk]

Làm thêm video về Server-side Rendering trong React đi anh ui

[@trungphamvan420]

em chào anh, anh cho em hỏi chút khi mà mình có nhiều actioncreator thunk tất cả chúng đều chung nhau logic phần pending là loading trong phần addCase thì có cách nào tổ hợp lại chúng k ah. tương tự với các state đều lấy action.payload nữa ah

[@atnguyenucchi9776]

Mình cũng có chung thắc mắc là nếu cái nào cũng có loading có cách nào dispatch nó qua một cái loading để ở global không hay là của ai người đó dùng.

[@arielnguyen9142]

👍🏻👍🏻👍🏻

[@holetex]

Thanks em 😍

[@taodailinhsuper]

Hình như phần update Completed cuối video cái state không đồng bộ theo database. Mình dùng map thì nó đồng bộ, không biết mình làm vậy có đúng không "state.todos.map((todo) => { if (todo.id === action.payload.id) { todo.completed = !todo.completed; }"

[@hiephoangtuan7347]

Đúng r bác, nhưng k phải update từ api, dù chạy đúng nhưng như vậy thì cái middleware chả có ý nghĩa gì cả vì đang update state ở client

[@khanhbao7307]

bạn phải update nó khi nhận request bằng phương thức update trong file fakeApi ấy nó ms chọc vào db

[@bug_hunter_001]

tks bạn ^^

[@minhson00948]

Sao lại không đồng bộ nhỉ mình tưởng kiểm tra nếu có id bằng nhau là có thể update đc chứ trong video mình chỉ thấy thiếu id ở chỗ action.payload.id thôi mà( trong video là action.payload)