Tại sao các Redux Reducer bắt buộc phải là Pure Functions và việc vi phạm tính chất này sẽ gây ra những hậu quả gì trong ứng dụng?

Question

Accepted Answer

Reducer trong Redux là một function nhận vào state hiện tại và một action, sau đó trả về state mới (previousState, action) => newState. Tính thuần khiết (purity) là quy tắc cốt lõi của kiến trúc Redux.

Định nghĩa Pure Function trong Redux:

Với cùng một đầu vào (state và action), reducer phải luôn trả về chính xác cùng một đầu ra.
Không được có các side effects như gọi API, thao tác với LocalStorage, tạo giá trị ngẫu nhiên (Math.random()), hay lấy thời gian hiện tại (new Date()).
Tuyệt đối không được thay đổi trực tiếp (mutate) state hiện tại mà phải tạo bản sao mới trước khi cập nhật.

Hậu quả khi vi phạm (Mutation State hoặc Side Effects):

Lỗi Time-travel debugging: Các công cụ như Redux DevTools dựa vào việc state là immutable để ghi lại lịch sử các action và khôi phục lại trạng thái trước đó. Nếu state bị mutate trực tiếp, DevTools sẽ không thể so sánh sự khác biệt (diff) chính xác.
Bỏ sót quá trình Re-render: React-Redux sử dụng cơ chế so sánh nông (shallow comparison) để quyết định xem component có cần cập nhật hay không. Khi mutate trực tiếp object state, reference của object không đổi dù giá trị bên trong đã thay đổi, dẫn đến component không nhận biết được sự thay đổi để render lại giao diện.
Khó kiểm thử (Unit Testing): Các hàm không thuần khiết phụ thuộc vào môi trường bên ngoài sẽ trả về kết quả khó đoán trước, làm cho việc viết Unit Test cho reducer trở nên bất khả thi hoặc dễ gặp lỗi flaky tests.

Kinh nghiệm thực chiến:

Trong Redux Toolkit, thư viện Immer đã được tích hợp sẵn bên trong createSlice. Immer cho phép chúng ta viết code có vẻ như đang mutate state trực tiếp (ví dụ: state.value += 1), nhưng thực chất nó đang làm việc trên một Proxy và tự động sinh ra một immutable state hoàn toàn an toàn đằng sau hậu trường.

Tại sao các Redux Reducer bắt buộc phải là Pure Functions và việc vi phạm tính chất này sẽ gây ra những hậu quả gì trong ứng dụng?

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi Redux liên quan cùng chủ đề

Tại sao các Redux Reducer bắt buộc phải là Pure Functions và việc vi phạm tính chất này sẽ gây ra những hậu quả gì trong ứng dụng?

Đăng nhập để xem câu trả lời

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi Redux liên quan cùng chủ đề