Tài liệu lập trình front reactjs SLIDE 8

Context: cách để truyền dữ liệu xuống cây component mà không cần phải truyền props xuống tất cả các cấp component Context được thiết kế để chia sẻ data được coi là global trong cây react components: current authenticated user, theme, preferred language

Conceive Design Implement Operate THỰC HỌC – THỰC NGHIỆP http://www.poly.edu.vn MỤC TIÊU Context API React với firebase CONTEXT API ❑Context: cách để truyền liệu xuống component mà không cần phải truyền props xuống tất cấp component CONTEXT API ❑Context thiết kế để chia sẻ data coi global react components: current authenticated user, theme, preferred language CONTEXT API CONTEXT API ❑React.createContext ❖Tạo context object ❖Khi react render component đăng ký context này, đọc giá trị current context từ Provider phù hợp (trong react components) ❖Tham số defaultValue sử dụng component không phù hợp với Provider phía CONTEXT API ❑Context.Provider ❖Mỗi context object kèm với Provider React component cho phép consume components (con cháu) đăng ký thay đổi context ❖Một Provider kết nối đến nhiều consumers ❖Các Provider lồng CONTEXT API CONTEXT API ❑Class.contextType ❖Thuộc tính contextType class gán context object ❖Sử dụng thuộc tính cho phép sử dụng giá trị gần context this.context ❖Ví dụ ❑Truy cập https://firebase.google.com ❑Tạo project FIREBASE AUTHENTICATION FIREBASE AUTHENTICATION FIRESTORE FIREBASE MODULE & CONFIG REDUX-THUNK FIREBASE ❑withExtraArgument ❑firebaseReducer REACT REDUX FIREBASE ❑ReactReduxFirebaseProvider ❖Provider cho context chứa firebase instance mở rộng REACT REDUX – FIREBASE AUTHENTICATION ❑Action: sign in , sign out component component CRUD FIRESTORE ❑Firestore data CRUD FIRESTORE ❑Example add new CRUD FIRESTORE ❑Example get all CRUD FIRESTORE ❑Example delete SUMARRY Context API React với firebase