React State Manager - Redux Toolkit, React Query, Redux Saga from Udemy

React State Manager là cách chúng ta quản lý "global state" trong ứng dụng React. Cụ thể hơn, có hai khía cạnh chúng ta quan tâm:

- Một là cách chia sẻ data giữa các components không có mối quan hệ với nhau.

- Hai là cách Fetching và Create/Update/Delete (mutate) data một cách hiệu quả (có xử lý caching data)

Các nội dung trọng tâm trong khóa học này:

Để chia sẻ data giữa các component, sử dụng Redux Toolkit, bao gồm:
- Cài đặt Redux cho ứng dụng React.JS (setup với React Vite và Typescript)
- Hiểu cách hoạt động và sử dụng Redux hiện đại với Redux Toolkit và các hook useDispatch, useSelector (React Hook)
- Persist data khi refresh (F5) với redux-persist
- Sử dụng Redux-thunk để xử lý async logic (get/post/put/delete data)
Khi kết thúc khóa học này, các bạn mới bắt đầu sẽ hiểu được data Flow của Redux. Điều quan trọng ở đây chính là việc chúng ta luyện cách tư duy, hiểu cách thư viện Redux nó hoạt động.
Làm được điều này, thì cho dù chúng ta vào công ty nào, sử dụng công nghệ gì (Redux thuần, Redux Tookit, Redux với Class component, Redux với Hook) thì chúng ta đều tự tin và có thể làm chủ được công nghệ.
Để Fetching/Mutate data, sử dụng React Query, bao gồm:
- useQuery Hook để fetching data
- useMutation để mutate (create/update/delete) data
- revalidate data (cache)
Ngoài ra, chúng ta sẽ cùng nhau đi phân tích những ưu, nhược điểm của Redux Toolkit/React Query khi sử dụng React ở phía server (với Next.js)
Khi ứng dụng React sử dụng Redux cần handle nhiều Async Request, chúng ta có thể sử dụng Redux Saga (middleware thay vì Redux-thunk)
- generator functon*
- Mô hình watcher/worker của Saga

Nếu bạn là người mới bắt đầu, muốn học, hiểu, và làm chủ hoàn toàn React's State, thì đây chính là khóa học các bạn tìm kiếm.

Hi vọng các bạn sẽ học được nhiều điều hữu ích từ khóa học này, phục vụ đắc lực cho việc trở thành một FrontEnd Developer một cách toàn diện.

What's inside

Learning objectives

Học & hiểu tư duy đứng sau việc quản lý state của ứng dụng react
Nắm vững & thành thạo redux thuần, cũng như redux toolkit

Đá bay (vì đã hiểu) lý do dùng redux thunk, redux saga middleware
Quản lý server state với react query

Học & hiểu tư duy đứng sau việc quản lý state của ứng dụng react
Nắm vững & thành thạo redux thuần, cũng như redux toolkit
Đá bay (vì đã hiểu) lý do dùng redux thunk, redux saga middleware
Quản lý server state với react query

Syllabus

Chapter 0: Giới Thiệu

#0. Demo Kết quả đạt được

#1. Hướng Dẫn Download Tài liệu khóa học

#2. Yêu cầu của khóa học

#3. Về khóa học này

#4. Về tác giả

Chapter 1: Setup Environment

#5. Công cụ code IDE

#6. Browser

#7. Node.JS

#8. Quản lý code với Git

Chapter 2: Redux Overview

#9. Redux là gì ?

#10. Tại sao lại học Redux ?

#11. Redux Die bởi React Context API

#12. Lịch sử phát triển của Redux

Chapter 3: Redux Setup

#13. Run Hello World với React/Redux

#14. Setup Redux Devtool

#15. Setup React với Vite

#16. Cài đặt thư viện Redux

Chapter 4: Redux Concepts

#17. Yêu cầu bài toán

#18. Mô hình Oneway Binding

#19. Các keywords sử dụng với Redux

#20. Redux Store

#21. Redux Slide

#22. useSelector - Read Redux's State

#23. useDispatch - Update Redux's State

#24. Tổng kết cách sử dụng Redux với Redux Toolkit (React)

#25. Bài tập thực hành tính năng decrease

#26. Sử dụng useAppDispath, useAppSelector với Typescript

#27. Kỹ năng Debug Xem Code Chạy

Chapter 5: Redux Practises

#28. Setup dự án Backend

#29. Setup Bootstrap

#30. Design Base giao diện

#31. Get List Users với React

#32. Redux Thunk

#33.1 Fetch List User với Redux (Part 1)

#33.2 Fetch List User với Redux (Part 2)

#33.3 Fetch List User với Redux (Part 3)

#34. Notification với React Toastify

#35. Bài Tập Design Create/Update/Delete User

#36.1 Create a New User với Redux (Part 1)

#36.2 Create a New User với Redux (Part 2)

#37. Bài tập Update a User với Redux

#38. Bài tập Delete a user với Redux

#39.1 Hỗ trợ dark/light mode (Part 1)

#39.2 Hỗ trợ dark/light mode (Part 2)

#40. Redux persist

#41. Bài tập CRUD blogs với Redux

#42. Tổng kết các kiến thức Redux đã học

Chapter 6: React Query

#43. Vấn đề tồn đọng

#44. Cài đặt React Query

#45. Fetch Data

#46. useQuery Hook

#47. React Query Devtool

#48. Query parameter

#49. Khái niệm Stale & Cache

#50. Design Pagination

#51. Phân trang với React Query

#52. Mutation Data

#53. Create New User

#54. Revalidate Data

#55. Bài tập Update User

#56. Bài tập Delete User

#57. Sharing Data Between Components

#58. Bài tập CRUD Blogs

#59. So sánh Redux và React Query

#60. Các tham số mặc định của React Query

#61.1 Reuse Query Key

#61.2 Reuse Query Function

#62. Tổng kết về React Query

Chapter 7: Redux/React Query với Nextjs

#63. Sơ lược về Next.js

#64. Setup Redux Toolkit cho Next.js

#65. Vai trò của Redux với Next.js

#66. Sử dụng React Query với Next.js

Chapter 8: Redux Saga

#67. Yêu cầu trước khi học Redux Saga

#68.1 Javascript Generator

#68.2 Yield

#69. Setup project

#70. Tích Hợp Redux Saga

#71. Saga Effects

#72. Root Saga

#73. Ví dụ increase button

#74. Bài tập về decrease button

#75. createAction

#76.1 Hiển thị list user (Part 1)

#76.2 Hiển thị list user (Part 2)

#77. Thêm mới user

#78. Bài tập Update User

#79. Bài tập Delete User

#80. Bài tập crud blogs

Chapter 9: Saga Flows

#81. Blocking/Non-Blocking Effects

#82. Watcher/Worker

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Phù hợp cho người mới bắt đầu muốn tìm hiểu React's State

Hỗ trợ thực hành toàn diện với đầy đủ các chức năng CRUD

Bao quát nhiều công nghệ liên quan như Redux, Redux Toolkit, Redux Saga, React Query

Cập nhật thường xuyên với các phiên bản mới nhất của các công nghệ

Tài liệu khóa học được cung cấp đầy đủ và chi tiết

Yêu cầu kiến thức nền tảng về React và lập trình Javascript

Cần tự trang bị máy tính và kết nối Internet để học

Phần bài tập thực hành có thể tốn kém đối với một số học viên

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React State Manager - Redux Toolkit, React Query, Redux Saga with these activities:

Tổ chức ghi chú và tài liệu

Show steps

Sắp xếp ghi chú, bài tập và tài liệu của bạn sẽ giúp bạn dễ dàng ôn tập và tham khảo trong tương lai.

Show steps

Thu thập tất cả các ghi chú, bài tập và tài liệu liên quan đến khóa học
Sắp xếp các tài liệu theo chủ đề hoặc theo thứ tự thời gian
Lưu trữ các tài liệu đã sắp xếp trong một nơi có thể dễ dàng truy cập

Thực hiện hướng dẫn sử dụng React Query

Show steps

React Query là một thư viện phổ biến để quản lý dữ liệu trong React. Làm theo hướng dẫn này sẽ giúp bạn nắm vững các tính năng cơ bản của React Query.

Browse courses on React Query

Show steps

Tìm hướng dẫn về React Query và theo dõi
Thực hành sử dụng useQuery Hook để truy xuất dữ liệu
Tìm hiểu cách sử dụng useMutation để tạo, cập nhật hoặc xóa dữ liệu

Tham gia nhóm học tập trực tuyến

Show steps

Học tập cùng bạn bè có thể giúp bạn củng cố kiến thức, giải quyết các vấn đề khó khăn và duy trì động lực.

Show steps

Tìm kiếm hoặc tạo một nhóm học tập trực tuyến tập trung vào React State Management
Tham gia các buổi học tập trực tuyến thường xuyên
Đóng góp vào các cuộc thảo luận, đặt câu hỏi và hỗ trợ các thành viên khác trong nhóm

Two other activities

Expand to see all activities and additional details

Show all five activities

Tham dự hội thảo về React State Management

Show steps

Tham dự các hội thảo sẽ giúp bạn kết nối với các chuyên gia khác, học hỏi từ các bài thuyết trình và cập nhật những xu hướng mới nhất trong lĩnh vực React State Management.

Browse courses on React State Management

Show steps

Tìm kiếm và đăng ký các hội thảo về React State Management
Tham dự các phiên hội thảo và lắng nghe các bài thuyết trình
Tham gia các buổi thảo luận và đặt câu hỏi cho các diễn giả
Kết nối với các chuyên gia khác và trao đổi ý tưởng

Đóng góp vào dự án React State Management

Show steps

Đóng góp vào dự án nguồn mở sẽ giúp bạn hiểu sâu hơn về kiến trúc và mã nguồn của thư viện, đồng thời có cơ hội học hỏi từ các nhà phát triển khác.

Browse courses on React State Management

Show steps

Tìm các dự án React State Management trên GitHub hoặc các nền tảng nguồn mở khác
Đọc tài liệu và mã nguồn của dự án
Xác định các lỗi hoặc cải tiến tiềm ẩn
Tạo yêu cầu kéo để đề xuất thay đổi của bạn

Career center

Learners who complete React State Manager - Redux Toolkit, React Query, Redux Saga will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

React State Manager - Redux Toolkit, React Query, Redux Saga

Here's a deal for you

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses