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: https://github.com/holetexvn/todo-app...
(Sau khi clone code. Checkout sang branch redux-thunk)

Học Redux trong 1 video: Học REDUX (+Toolkit) trong 1 video (2...
Async JavaScript: ASYNC JavaScript trong 30 phút (CALLB...
ES6: Học ES6 JavaScript cho người mới bắt ...
useReducer: Học useReducer - React Hooks (2021)
React Hooks Series: React Hooks
ReactJS Cơ bản 30 phút: Học React JS cơ bản trong 30 phút

Fake API Library: https://miragejs.com/
Redux Docs: https://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: Facebook: ​
Instagram: Instagram: holetex
Github: https://github.com/holetexvn
Facebook cá nhân: Facebook: minhtung09
Email: [email protected]

#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:
https://www.seevid.ir/fa/result?ytch=HoleT...

• #people_blogs
• #redux
• #redux_tutorial
• #hc_redux_reactjs
• #redux_cho_ngi_mi_bt_u
• #redux_overview
• #react_js
• #react_hooks
• #redux_toolkit
• #react_redux_toolkit
• #redux_toolkit_la_gi
• #holetex
• #holetex_react
• #redux_hoat_dong_the_nao
• #hoc_redux
• #redux_co_ban
• #redux_middleware
• #redux_thunk
• #xy_ly_bat_dong_bo_voi_redux
• #redux_saga
• #middleware_trong_redux
• #middleware
• #redux_thunk_la_gi
• #redux_thunk_vs_saga
• #redux_thunk_tutorial
• #redux_thunk_async
• #redux_thunk_react
• #redux_thunk_redux_toolkit