Redux Flashcards
What is Redux Toolkit ?
Redux Toolkit là cách viết mã Redux hiện đại
Cho phép chúng tôi viết ít mã hơn rất nhiều để đạt được kết quả chính xác như trước kia
Có 3 điểm nổi bật :
1. Nó cho phép chúng ta viết mã thực sự làm thay đổi State bên trong Reducer
2. Tự động tạo Action Creator
3. Tự động thiết lập Thunk Midlewere và dev tools
What is Redux Middleware?
- Không thể thực hiện lệnh gọi API trong một hàm Reducer , vì hàm Reducer cần là một mà thuần túy ( pure )
- Middleware cơ bản là một hàm nằm giữa Dispatch và Store
- Middleware là nơi phù hợp cho các Side Effect trong chu trình Redux
Redux là gì ?
Là thư viện của bên thứ 3 để quản lý global state
- Là một thư viện hoản chỉnh ( có thể sử dụng với bất kỳ khuôn khổ nào hoặc thậm chí Vanilla JS )
- Nó tương tự như việc sử dụng Context API + useReducer
Có 2 version :
1. Classic Redux
2. Modern Redux Toolkit
Khi nào chúng ta nên sử dụng Context API hoặc là Redux
Context API + useReducer :
để quản lý các global state trong ứng dụng Nhỏ
Khi bạn cần là chia sẻ một giá trị không thay đổi thường xuyên thì Context API là hoản hảo cho việc đó ( Color theme, xác thực người dùng , ngôn ngữ ưa thích )
- Giải quyết vấn đề Prop drilling
Redux :
để quản lý các global state trong ứng dụng lớn
Khi giao diện người dùng cập nhật thường xuyên ( như giỏ hàng , các tab hiện đang mở , hoặc bộ lọc dữ liệu phức tạp ) ( Vì redux đã được tối ưu hóa cho những cập nhật thường xuyên này )
- Phù hợp cho trạng thái phức tạp và các đối tượng lồng nhau
Context API vs Redux
Context API :
Ưu điểm :
- Tích hợp trong React
- Dễ dàng để setup single contxt
Nhược Điểm :
- Nếu tạo thêm Context thì sẽ tạo hiệu ứng “ provider hell “
- Không có cơ chế bất đồng bộ
- Tối ưu hóa là một vấn đề
Redux :
Nhược điểm :
- Làm tăng kích thước gói ( phần mềm thứ 3 )
- Làm nhiều việc hơn để setup
Ưu điểm :
- Dễ dàng để tạo additional State
- Hỗ trợ middleware cho bất đồng bộ
- Có tính năng tối ưu
- Có DevTools tuyệt vời
