Này như là deploy một server backend cho phần frontend của mình luôn hả bác

Không anh ạ.

Có gì đó sai sai, sao những bài hay như này lại không có upvote/comment nhỉ

không biết phần Webhook này có instant không, chứ phần notification ở cái "Chuông" mình thấy delay/lag. Và mail notification thì delay vài tiếng

@huukimit Giả webhook endpoint không có cơ chế authentication - "public". Thì anh có cách nào verify xem event có thực sự được gửi từ Viblo về không em?

bạn xem đổi từ hex nó ra gì (hint: 64)

Em cảm ơn anh đã chia sẻ, bài viết rất hay ạ 👍
Anh cho em hỏi thêm một chút: Ngoài cách này ra mình cũng có thể check trong shouldComponentUpdate() cũng là một cách đúng ko ạ?
Giả sử là có thì với ví dụ trên, em kiểm tra hàm click() kia trong lifecycle này như thế nào được nhỉ? (bow)

Đúng lúc mình đang cần tài liệu, cảm ơn bạn.

Chắc là đùa :>

cảm ơn bạn

Ó sầm 👍 Cảm ơn bạn nha =))

Cám ơn Add nhiều. Mình đã tự làm được. Reg: (?<=({"access_token")(.*)(?=",) Một lần nữa cám ơn bài viết rất hữu ích.

bạn đang muốn reuse lại hàm getPostList nhỉ, có vài cách tùy nhu cầu thực tế?

1. chuyển hết logic của nó vào 1 cái saga, 2 component kia chỉ dispatch action (thông dụng nhất nhưng phải lắp lắm toy: redux, redux-saga)
2. chuyển logic vào 1 hàm đặt ở component cha (đơn giản nhất nhưng 2 component sẽ bị ràng buộc về quan hệ)
3. viết custom hook (chỉ áp dụng cho functional component)
4. viết HOC (ngày xưa chưa có hook thì người ta hay dùng HOC)

nhưng trong ví dụ của bạn thì dùng cách nào cũng sida cả, vì vấn đề chính là: state của bạn đang để ở local component => bạn nên quay lại fix design như a @cuong_nguyen đề xuất thay vì quấn theo chiều gió :v, tức:

1. gói 2 thằng vào component cha
2. đẩy state và logic getPostList lên component cha
3. viết custom hook để lược bỏ logic của getPostList khỏi component cha

=> vừa đơn giản, vừa gọn, vẹn đôi đường (t hiểu đây là dự án chơi chơi thôi nhé chứ thực tế phải lắp redux vào r xài cách 1)

Cảm ơn bác đã chia sẻ. có lẽ bác nên đặt lại cái tiêu đề để user đọc được cái này làm gì cho cái gì luôn. Đọc 1 đoạn mới biết là chỉ dành cho bên Nhật =))

Cảm ơn tác giả vì bài quá rất dễ hiểu.

Bài viết tiếp theo của phần này là gì vậy ah???

"this" nó ko chỉ đơn giản là "trả về object gần nhất chứa nó", mà chính xác hơn là callsite gần nhất (chỗ mà nó đc gọi ra), tức là muốn biết "this" là cái gì thì bạn phải dựa vào callstack, chứ ko thể nhìn code đoán đc. Ngoài ra, còn có rất nhiều trường hợp bind loạn xị ngậu của "this" mà người dùng phải lưu ý. T lấy 1 ví dụ đơn giản của việc lost binding như sau:

a = "outside"
function foo() { console.log(this.a) }
obj = {a: "inside", foo: foo}

obj.foo()    // inside  => callstack là: main --- obj --- foo => this trỏ vào obj

bar = obj.foo

bar()   // outside => callstack là: main --- bar  => this trỏ vào global

Như vậy thì "this" khá là tricky nên sử dụng phải nhớ rõ các luật ưu tiên của nó (thứ tự ưu tiên giảm dần):

1. bind vào object nếu dùng new MyObj
2. bind theo đối tượng ta chỉ định khi bind, call, apply
3. dựa trên callsite (bằng cách kiểm tra call stack chứ ko phải đọc code xem nó gần thằng nào nhất)
4. nếu ko bind vào đâu thì nó sẽ bind vào global (bật strict mode lên thì thành "undefined"

Chỉ bằng JS thuần với vài dòng code thế này đã cover được 1 mớ tính năng HAY và CẦN cho Upload File rồi!

Cảm ơn tác giả nhiều 👍