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

All in one - Quản Lý State của ứng dụng React một cách hiệu quả

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