Actions ❖Action như 1 event mô tả điều gì đó (what) xảy ra trong ứng dụng ❖Là một javascript object thuần tuý, có thêm trường (field) type. ❖Ví dụ Actions ❖Action như 1 event mô tả điều gì đó (what) xảy ra trong ứng dụng ❖Là một javascript object thuần tuý, có thêm trường (field) type. ❖Ví dụ
Conceive Design Implement Operate THỰC HỌC – THỰC NGHIỆP http://www.poly.edu.vn MỤC TIÊU Redux React với redux Redux thunk REDUX REDUX – DATA FLOW (Action) (View) (State) View: mô tả giao diện người dùng dựa vào state Action: kiện xảy ứng dụng dựa vào user input REDUX ❑Actions ❖Action event mơ tả điều (what) xảy ứng dụng ❖Là javascript object t, có thêm trường (field) type ❖Ví dụ REDUX ❑Reducers ❖như event listener xử lý event dựa vào received action (event) type ❖là function, nhận current state action object, cập nhật state cần trả state (state, action) => newState ❖Ví dụ REDUX ❑Luật tạo reducers ❖Chỉ nên tính toán giá trị new state dựa vào đối số state action ❖Không phép sửa đổi state có, chép state có thực thay đổi giá trị chép REDUX ❑Store ❖Được tạo cách truyền vào reducer ❖Dùng phương thức getState để trả current state ❑Dispatch ❖Là method redux store ❖Cách để cập nhật state: store.dispatch() ❑Ví dụ REACT VỚI REDUX ❑React-Redux thư viện độc lập cho phép sử dụng Redux với ứng dụng React ❑Chúng thường sử dụng để truy cập liệu global state REACT-REDUX ❑Cấu trúc project SONG LIST APP - ACTION SONG LIST APP - REDUCERS PROVIDER ❑Provider CONNECT ❑Connect CONNECT - MAPSTATETOPROPS ❑Connect REDUX THUNK codepen.io REDUX THUNK REDUX ASYNC DATA FLOW REDUX-THUNK REDUX-THUNK BLOG APP CẬP NHẬT STATE