LẬP TRÌNH REACTJS

LẬP TRÌNH
REACTJS
Chương 8: REDUX

1
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 1. Tổng quan về Redux

- Là thư viện js quản lý state, mà state này có thể dự

đoán được, được sử dụng ở nhiều nơi
- Có thể dùng được cho nhiều loại JS app
- Sử dụng kiến trúc 1 luồng dữ liệu 1 chiều uni-
directional data flow
- Redux chỉ dùng 1 store duy nhất làm Single Source
of Truth, tất cả component cần dùng state đều
connect lên store
- Chuyên dùng cho những website trung bình, lớn,
cần đảm bảo hiệu năng ổn định, cần có chức năng
undo, redo, cần cache dữ liệu để sử dụng lại
- Nhược điểm lớn nhất của Redux là cồng kềnh, set
up phức tạp

2
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 2. Kiến trúc của Redux

Store gồm có:

- State: là dữ liệu hiện tại được lưu trên state, là dạng
READ-ONLY, muốn update thì phải thông qua
Action
- Reducer: là hàm biến đổi state cũ sang state mới, là
một pure-function
- Dispatcher: quản lý middlewares và chuyển dữ liệu
xuống reducer
- Action = plain: là javascript object mô tả hành động
cập nhật state như thế nào

3
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 3. Redux Toolkit

- Cài đặt: `npm install @reduxjs/toolkit react-

redux`
- RTK là một thư viện giúp viết Redux tốt hơn, dễ
hơn và đơn giản hơn nhưng không làm mất đi
bản chất vốn có
- Ba vấn đề làm nền tảng ra đời RTK:
+ Config store quá phức tạp
+ Cần tích hợp quá nhiều package để Redux thật
sự trở nên hữu dụng
+ Boilerplate code quá nhiều

4
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 4. Redux Toolkit gắn gọn như thế nào?

5
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 4. Ví dụ đơn giản sử dụng Redux Toolkit

6
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 4. Ví dụ đơn giản sử dụng Redux Toolkit

7
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 5. Redux Persist

Cài đặt:
`npm install redux react-redux redux-persist`
Lợi ích của Redux persist:
- Bảo vệ dữ liệu: Giúp tránh mất dữ liệu khi người
dùng tắt trình duyệt hoặc đóng tab.
- Tiết kiệm thời gian: Không cần phải khởi tạo lại
trạng thái từ đầu mỗi khi người dùng truy cập lại
ứng dụng.
- Cho phép tùy chỉnh cách lưu trữ và khôi phục trạng
thái, bao gồm việc chỉ lưu trữ một phần state hoặc
sử dụng cơ chế lưu trữ tùy chỉnh

8
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 6. Slice

- Là một cách thuận tiện để định nghĩa các phần tử

chính của Redux: state, reducers và action creators
- Ngoài ra còn có có thể kết hợp rất tốt với
middleware createAsyncThunk nhằm xử lý các tác
vụ bất đồng bộ
- Đồng thời có thể theo dõi trạng thái của tác vụ và
thực thi action thông qua extraReducers
=> Giúp viết mã gọn và dễ đọc hơn

9
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 7. Redux và React Context
Đặc điểm Redux React Context
Trạng thái ứng dụng được lưu trữ trong một context, các
Trạng thái ứng dụng được lưu trữ trong store của
component có thể truy cập trạng thái thông qua Provider
Quản lý trạng thái Redux, mỗi component có thể truy cập và cập nhật
và cập nhật thông qua Consumer hoặc hooks như
trạng thái thông qua các actions và reducers.
useContext.

Cần phải định nghĩa các action types, actions và Cú pháp đơn giản hơn vì chỉ cần định nghĩa context và
Cú pháp
reducers riêng biệt, dẫn đến cú pháp phức tạp hơn. sử dụng hooks như useContext.

Redux sử dụng thuộc tính shallow comparison để xác

React Context sử dụng strict comparison, không thực
Hiệu suất định khi nào cần cập nhật component, giúp tối ưu
hiện tối ưu hiệu suất như Redux, bị re-render nhiều
hiệu suất, hạn chế re-render

Phù hợp với ứng dụng lớn và phức tạp, giúp quản lý
Kích thước ứng dụng
trạng thái toàn cục một cách hiệu quả.
Cộng đồng hỗ trợ Redux có cộng đồng rộng lớn và nhiều plugin hỗ trợ.
Khó khăn trong việc Redux cung cấp công cụ mạnh mẽ để theo dõi trạng
debugging thái và debug, giúp dễ dàng tìm lỗi.
Nhiều thư viện middleware hỗ trợ Redux như Redux
Thư viện hỗ trợ
Thunk, Redux Saga, Redux Toolkit, v.v.
Phù hợp với ứng dụng nhỏ hoặc có trạng thái đơn giản,
không phải cần store toàn cục.
React Context cũng có cộng đồng hỗ trợ nhưng không
phong phú như Redux.
React Context có công cụ debug có hạn hơn so với
Redux.
React Context không có nhiều thư viện middleware hỗ
trợ, phải xây dựng tùy chỉnh nếu cần.

10
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
 11
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS