Tóm tắt React:
Nguyên tắc một app React là dựa vào component. Mỗi component có state và props. Nếu state của một component thay đổi thì nó sẽ được render lại. Props để truyền data từ component cha sang component con
Vấn đề là khi ta muốn truyền props từ 2 component không phải cha-con thì sẽ xảy ra vấn đề
Ví dụ sau, một app nhỏ chỉ có Main -> Parent -> Child như sau thì truyền props đơn giản
Nhưng với app phức tạp hơn một tý, khi muốn truyền props giữa 2 component không phải cha-con thì rất phức tạp:
Đó là lý do tại sao nên dùng Redux:
Tóm lại cần một cơ chế để quản lý state trong React/React Native.
Không phải cứ React/React Native là phải dùng Redux. Cũng không phải Redux chỉ được dùng trong React/React Native
Thực ra Redux dựa theo ý tưởng của Flux. Ngoài Redux ra bạn có thể dùng:
Mobx ( Cài này phổ biến chỉ sau Redux )
Jumpsuit ( đặt tên ngáo thật )
Nhưng lập trình React Native thì nên dùng Redux với Mobx.
Đáng lẽ ra mình sẽ viết bài "Tại sao cần Redux và cách dùng". Nhưng để hiểu được tại sao và cách dùng thì nên hiểu nguyên tắc chính của nó, từ đó khi học chúng ta sẽ để ý những nguyên tắc này mà học theo. Nơron thần kinh trong não mới bắt đầu liên kết lại.
Cũng giống như bạn học lập trình hướng đối tượng sẽ có 4 nguyên tắc: trừu tượng, đóng gói, kế thừa, đa hình vậy. Từ đó mới học class , object, properties, method, access modifier, khởi tạo, kế thừa, interface, vv
Nguyên tắc này từ đâu? Đương nhiên từ nhóm tạo ra nó rồi, một trong đó là Dan Abramov
Chỉ có một cây object trong một ứng dụng, và người ta đặt nó là store. Ví dụ mình có viết một ứng dụng tìm việc làm đơn giản:
Thì sẽ được một store như sau: + auth: dùng để quản lý đăng nhập + jobs: danh sách job tải từ web service + likedJobs: danh sách job đã thích
Không update store trực tiếp được, muốn thay đổi cái store thì phải truyền action vào. Mà action nghe cao siêu vậy thôi, chứ nó chỉ là một object trong Javascript. Quy định duy nhất của của object này là phải có type. ( type thường là chuỗi string ) Ví dụ action đăng nhập Facebook thành công:
Ví dụ action thích một công việc nào đó:
Sẽ có một cái hàm nhận cái action ở trên, rồi trả về state mới. Mà hàm này phải là pure function. Mà pure function là sao?
Cái pure function này viết cả bài cũng được. Nhưng đại ý chính là pure function không gây side effects như: thay đổi giá trị tham số, không gọi web service hay database trong hàm này.
Khi người dùng nhấn like một job ( nhấn button like ) -> tạo action:
Sau đó Reducer là một cái hàm, nó trả về state mới
Sau đó ở component nào muốn xài thì liên hệ store để truy cập dữ liệu trong store.
Hình này mới mô tả một chiều của dữ liệu: giữa action, reducer và store
Đây mới là hình đầy đủ:
Đương nhiên còn có nhiều phần chi tiết bên trong mình chưa đề cập đến như:
The Complete React Native and Redux Course
Hình chôm từ:
https://www.udemy.com/full-stack-universal-react-with-redux-express-and-mongodb/
NIVIKI.COM | Telegram | Twitter
Thất nghiệp. Đang rủ rê nhiều người thất nghiệp. Hy vọng với NIVIKI.COM có thể lan toả tinh thần thất nghiệp đến với nhiều người hơn nữa
Join Discord Channel để giao lưu với mình