Redux Thunk - Middleware trong Redux Toolkit (2022)
Ở video trước chúng ta đã học về Redux. Và chúng ta có 1 ràng buộc là ở trong Store chúng ta không được có bất kì đoạn code bất đồng bộ hoặc bất kì side-effect nào. Bất kì các tác vụ bất đồng bộ nào thì đều phải thực hiện phía bên ngoài của store.
Tuy nhiên, trong thực tế thì đôi khi các ứng dụng sẽ cần thực hiện các tác vụ side-effect trước khi cập nhật state trong Store chung. Vậy thì có một câu hỏi đặt ra là. Chúng ta sẽ cần viết các đoạn logic side-effect này ở đâu trong khi không thể viết chúng ở trong các reducer?
⇒ Và đó là lúc mà Redux Middleware ra đời để cho phép chúng ta viết các đoạn code logic mà thực hiện các side effects này
👉 Link tham khảo:
Source code: github.com/holetexvn/todo-app...
(Sau khi clone code. Checkout sang branch redux-thunk)
Học Redux trong 1 video: • Học REDUX (+Toolkit) t...
Async JavaScript: • ASYNC JavaScript trong...
ES6: • Học ES6 JavaScript cho...
useReducer: • Học useReducer - React...
React Hooks Series: • React Hooks
ReactJS Cơ bản 30 phút: • Học React JS cơ bản tr...
Fake API Library: miragejs.com/
Redux Docs: redux.js.org/tutorials/essent...
👉 Timestamp
0:00 INTRO
00:39 Giới thiệu và Hướng dẫn setup source code
04:52 Giới thiệu lại ứng dụng Todo App từ video Redux
09:30 Giới thiệu sơ qua lại về kiến trúc Redux
16:35 Hướng dẫn setup và sử dụng thư viện fake api (Tùy chọn)
34:50 Giới thiệu Redux Middleware
41:35 Cập nhật Todo App để sử dụng Redux Thunk
01:25:18 OUTRO
📢 Liên hệ với mình tại:
Facebook: /
Instagram: / holetex
Github: github.com/holetexvn
Facebook cá nhân: / minhtung09
Email: holetex@outlook.com
#holetex #redux #reduxthunk #reduxtoolkit #frontend
🤝 Tham gia làm hội viên của kênh này để được hưởng đặc quyền:
kzread.info/dron/leT.html...
Пікірлер: 68
chỉ 30 video đã đạt 10N subs thì hiểu đẳng cấp tới đâu rùi.
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 ạ!
Video rất hay và dễ hiểu. Cám ơn anh nhiều!
Anh giải thích rất có tâm!
Cảm ơn anh vì bài giảng mà em đang cần
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ê 😄😄
Cảm ơn anh vì video rất hay và bổ ích
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
2 жыл бұрын
Cảm ơn Khang nhiều nhaa
Thấy anh đăng video mới vô like liền :vv cảm ơn anh vì những video bổ ích
@holetex
2 жыл бұрын
Cảm ơn em nhé
chờ mãi a ơi. cám ơn a.
@holetex
2 жыл бұрын
Cảm ơn em đã ủng hộ anh ❤️
Mong anh làm về react query nữa ạ . thư viên đó làm tăng performance hay quá
Tuyệt vời anhh ơi
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
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
2 жыл бұрын
Cảm ơn em nhé 😍
Video rất hay và dễ hiểu. Bạn có thể làm thêm video về Redux-Saga được ko ?
chờ anh hơi lâu
hóng anh ra clip làm project với reactjs tiếp
Cảm ơn anh!
@holetex
2 жыл бұрын
Thanks em 😍
Quá bổ ích
Tuyet voi
a làm thêm về redux persist nữa nha a 😚
Video hay quá anh ơi =)) Klq cơ mà quả mắt anh trông ảo thật đấy =))
@holetex
2 жыл бұрын
Kk cảm ơn em
Làm thêm video về Server-side Rendering trong React đi anh ui
video dễ hiểu lắm ạ. Anh có thể làm thêm video về redux saga đc k ạ
cảm ơn anh
@holetex
2 жыл бұрын
Cảm ơn em 😍
hay a
Làm thêm video với Redux-Saga đi a
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 ạ
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?
👍🏻👍🏻👍🏻
@holetex
2 жыл бұрын
Thanks em 😍
Anh làm redux-saga đi anh :"
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 ạ
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
7 ай бұрын
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ố
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
2 жыл бұрын
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
làm video về redux toolkit và redux saga đi pro
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
6 ай бұрын
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.
1:25:06 Em thầy nó chưa update lại state, khi mình click vào completed
sao mk khong update duoc nhi? trang thai cua completed van la false sau khi tich vao nhi?
W video
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
11 ай бұрын
Đúng bạn ơi, chắc viết vội nên anh ấy k để í đấy,
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 ạ
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
2 жыл бұрын
Mong anh ra thêm video về redux saga nữa ạ
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
8 ай бұрын
@@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.
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
anh ơi anh làm về rudux-saga được không ạ
Sao khi update k call lại để lấy lại list todos mà phải đi sửa ở FE store vậy a
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
11 ай бұрын
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
5 ай бұрын
tks bạn ^^
@minhson00948
3 ай бұрын
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)