Redux Toolkit là một package chính thức của nhóm Redux, được dùng để config và quản lý Redux store một cách dễ dàng hơn. Nó bao gồm các functions/helper sẵn giúp chúng ta quản lý các state rất là thuận tiện. Trong bài này chúng ta sẽ đi từng bước về cách cài đặt Redux – Redux Toolkit trong React Native.
Cách cài đặt Redux – Redux Toolkit trong React Native
Bước 1: Cài đặt Redux và Redux Toolkit:
npm install react-redux
npm install @reduxjs/toolkit
Bước 2: Cấu hình Redux cho dự án
Giả sử trong tình huống chúng ta cấu hình để xử lý chức năng giỏ hàng
a/ Tạo file store.js với nội dung như sau:
Để làm rõ cách sử dụng Redux Toolkit chúng ta hãy cùng tham khảo ví dụ sau:
Tạo chức năng giỏ hàng cho ứng dụng mua hàng
Bước 1: Thêm các hàm điều khiển cho Redux trong file store.tsx , cụ thể là đối tượng Giỏ hàng – Cart gồm có thêm, xoá, clear …
Khai báo đối tượng createSlice như sau:
createSlice : hiểu nó như là 1 phần nhỏ của “state” trong “container” của Redux . Mỗi một đối tượng dữ liệu chúng ta muốn sử dụng trong dự án thì được tạo riêng 1 “slice” để dễ dàng quản lý, chỉnh sửa hay nâng cấp code, như là một kiểu Mô đun hoá trong lập trình
Như ví dụ hiện tại, tạo ra 1 slice cho giỏ hàng, tương lai nếu có các mục khác như: thông báo – Notification thì có thể tạo tiếp 1 slice cho Notification riêng biệt với giỏ hàng
Đăng kí slice này với Redux:
Tạo lần lượt các file Header, Content, và App có nội dung như sau:
Header.tsx: chứa thông tin giỏ hàng, hiển thị số lượng trong giỏ hàng, dữ liệu được lấy từ Redux thông qua câu lệnh useSelector như sau:
Nội dung file Content: File này chứa các hàm gửi dữ liệu vào State Container của Redux thông qua “dispatch”
Gắn sự kiện cho các nút trên giao diện
Hoàn thiện file App.tsx với thẻ Provider của Redux
Sản phẩm hoàn chỉnh sẽ được kết quả như sau:
Tác giả Thầy Nguyễn Hữu Huy
Bộ môn Công nghệ thông tin
FPT Polytechnic Hà Nội
