如何管理獨立反應組件之間的通信？

Question

我想實現一個類似於messenger.com的web應用程序，也是基於反應框架。我的問題是管理List和Content組件之間的通信，因爲它們彼此不相關。其父組件的渲染方法是這樣的：

回報（ 「<」列表「/>」 「<」內容‘/>’ ）

我想內容組件刷新並加載一些數據取決於選定的列表元素，類似於messenger.com。 Here's simple mockup

我讀過很多關於REDX的資料，但我根本無法想象它應該如何在這種情況下實施。

這裏也是我的整個反應在瀏覽器端運行的腳本：http://pastebin.com/ua928BEc

對不起球員，如果它是一個noob問題，我剛開始使用閱讀此反應:)

非常感謝，

Wojtek

Answer 1

Thinking in React是一個很好的教程，解釋了React中的狀態所有權以及組件如何通信。一旦你對它感到滿意，你可以嘗試在vanilla React中實現它。

當你舒服反應，但請注意，您的一些組件，因爲所有的狀態處理邏輯變得過於龐大，你可能想看看通量實現像終極版卸載狀態處理它。 Getting Started with Redux是一套使用Redux和React的免費入門視頻，它們由官方basics tutorial完善補充。

但don’t rush into Flux or Redux until you understand React。

Answer 2

爲了解決這個問題與通量架構。

由於您正在處理一個列表和一個內容，因此選擇了您擁有的列表項，會調用一個操作（獲取此列表的內容），該操作將被調度，並且會爲該存儲提供值你需要的內容。

如果您需要組件之間的進一步通信，您可以給列表/內容組件提供一些道具。

flux architecture description.

Flux example chat and others examples.

Answer 3

如果系統是簡單的使用一個全球信息系統，如發佈/訂閱或信號：PubSubJS，https://github.com/Hypercubed/mini-signals，http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/

如果您的應用程序更加複雜考慮使用一個通量實現（flux，redux ...）。將用戶界面組件連接到磁通存儲。您更新商店中的狀態，組件將自動重新呈現。