[React Native Nâng Cao] Redux trong React Native

Redux trong React Naitve – Quản lý nhiều màn hình trong lập trình React Native

Hi các em, chúng ta lại gặp lại trong bài viết giới thiệu về thư viện Redux trong lập trình React Native.
Thư viện Redux – Quản lý nhiều màn hình trong React Native .
Link thư viện : https://react-redux.js.org/introduction/getting-started

Trong bài thầy đề cập đến những vấn đề sau :

1.Redux là gì ?

Trícn nguyên văn từ trang chủ định nghĩa của Redux là “Redux is a predictable state container for JavaScript apps.” nói 1 cách dễ hiểu thì Redux cung cấp cho lập trình viên 1 cơ chế để lưu trữ các biến State và lập trình viên có thể truy cập các state này 1 cách dễ dàng từ các màn hình hay các component trong dự án React Native
Điển hình, Redux được sử dụng để hỗ trợ gọi các sự kiện, biến, từ màn hình này tới màn hình khác dạng Parent – Children (Cha – con) hay 1 màn hình chính chứa nhiều màn hình con. Hoặc 1 component chứa nhiều component khác như hình

2.Cách cài đặt

Redux là 1 thư viện nên cần được cài đặt bổ sung cho dự án React Native bằng cách sau :

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

3.Cách sử dụng

Để lấy ví dụ sử dụng Redux, trong bài này Thầy tạo 1 dự án React Native với các thành phần như sau :
1 . Màn hình App – Chứa các màn hình con gồm HomeScreen, LoginScreen, ProfileScreen
Màn hình đầu tiên được hiển thị là màn hình Home
2. Chức năng sẽ thực hiện với Redux – Ở màn hình Home có chức năng thêm sản phẩm yêu thích
Nếu người dùng chưa Login thì bật màn hình Login, còn nếu Login rồi thì lưu sản phẩm lại.
Mở màn hình Profile sẽ thấy danh sách sản phẩm Yêu thích.
3. Dữ liệu được lưu lại thông qua “State Container” của Redux