S2 - L29 - Video Selection

[ngminhtrung]

Phần này nói đến vụ truyền props và thay đổi state làm mình bất ngờ.

1. Nhu cầu ban đầu là gì? Đó là khi click chọn vào 1 trong các ô trong phần Video List, thì ô Video Detail sẽ tự động thay đổi, chuyển sang video vừa được chọn.

2. Vậy tác giả đã hướng dẫn làm như thế nào?

Ý tưởng chung: Sử dụng callback, truyền từ App -> Video List -> Video_list_item -> thay đổi Video_Detail

• Bước 1: Từ component App, truyền 1 callback function vào component VideoList dưới dạng props. Props này gán vào attribute onVideoSelect. Chưa nói đến vụ đây là callback, function này có tác dụng nhận vào 1 object video, rồi truyền sang cho hàm setState() để đặt lại state của App, cụ thể là properties selectedVideo. Một khi hàm này được gọi, state của App thay đổi, nghĩa là React sẽ render lại những component liên quan đến phần thay đổi trong App, ở đây là selectedVideo, dẫn đến component VideoDetail sẽ được render lại.

        <VideoList 
            onVideoSelect={selectedVideo => this.setState({selectedVideo})}
            videos={this.state.videos} 
        />

• Bước 2: Trong component VideoList, truyền tiếp function kia cho VideoListItem dưới dạng props. Props này gán vào attribue onVideoSelect (cùng tên).

        return <VideoListItem
                    onVideoSelect={props.onVideoSelect} 
                    key={video.etag}
                    video={video} />

• Bước 3: Trong component VideoListItem, truyền tiếp function kia vào event handle onClick của element <li>. Nghĩa là khi bạn <li> này bị click chọn, thì function kia được gọi. Event handler onClick của bạn <li> này sẽ truyền vào object video cho function, vậy là xong, fucntion đã có đủ mọi thứ để chạy. Và nó chạy giống như mục đích đặt ra, đã nói ở bước 1.

        <li onClick={() => onVideoSelect(video)} className="list-group-item">

3. Vậy có gì thấy hay?: Hay ở chỗ function nói trên đã "du lịch xuống" 2 level:
   • từ App -> VideoList,
   • từ VideoList -> *VideoListItem**,

Đến tận VideoListItem, nó mới được truyền vào tham số để chạy. Kết quả chạy này, lại có tác dụng kích động phản ứng ở tận ... App. Quá ngạc nhiên.

Theo cái hiểu hiện tại, mỗi component đều có state riêng, method setState() ở component nào sẽ có tác dụng chỉ với component đấy. Vậy mà mà method setState() kia chu du tận đâu, vậy mà vẫn quay về thay đổi component mà ban đầu nó được gửi đi.

[ngminhtrung]

React - truyền dữ liệu từ component con đến cha thông qua callback

[ghun131]

Sau đấy Stephen có nói là nếu ai vào sau bảo trì code thì sẽ phải mò tìm khá mệt để biết cái onVideoSelect nó ở đâu và làm gì. Em xem hết section2 rồi mà ko thấy Stephen nói cách sửa, em đoán là tiếp trong Redux. Em không hiểu lắm, nếu người sử dụng click vào 1 video thì event đấy sẽ xuất hiện ở VideoListItem hay xuất hiện ở App vì em nghĩ sự kiện được khai báo ở VideoListItem. Vậy thì luồng data sẽ chạy như thế nào?

[ngminhtrung]

@hungHoangDang : đọc cái bài anh comment ở trên nhé. Anh chưa biết là có hiểu chính xác hay chưa, nhưng cứ tạm coi như sau:

App (level 1)  // hàm callback được khai báo ở đây
|
|---- VideoList (level 2) // hàm callback được truyền xuống đây
           |
           | --- VideoListItem (level 3) // hàm calaback được truyền tiếp xuống đây, và nhận tham số ở level 3 

Vậy là khai báo ở level 1, nhưng nhận đủ tham số ở level e, khi thực thi vẫn coi như đang thực thi ở level 1 nhờ this bảo toàn context.

Data sẽ chạy ngược từ child lên parent.

[ghun131]

Trong bài ở kipalog ấy ạ, đoạn này ý anh là onVideoSelect đúng không ạ?

Mỗi khi bạn <li> này bị click, thì function videoSelect sẽ được gọi. Event handler onClick của <li> sẽ truyền value cho videoSelect. Vậy là function đã có đủ mọi thứ để thực thi, và nó sẽ chạy đúng với mục đích ban đầu đặt ra ở bước 1.

Từ đấy thì em có thể suy ra được là sau khi click event ở VideoListItem sẽ chạy đến App để setState render tất cả mọi thứ lại. Anh thấy có hợp lý ko?

[ngminhtrung]

@hungHoangDang : ừ, anh cũng đang hiểu như vậy. Hàm nó truyền xuôi (từ level 1 -> 3), sau khi nhận đủ "vật tư" (tức là object), thì lại đi ngược (từ level 3 -> level 1) để thực thi.