在反應應用程序中共享全局/單例數據

我正在重寫一個小應用程序以嘗試更好地理解React。我試圖確定共享「單身」數據的「正確」/最有效的方法 - 例如，登錄時已正確驗證身份的用戶。在反應應用程序中共享全局/單例數據

眼下父「應用程序」組件在其狀態，這是我傳給子組件作爲一個道具屬性user：

<Toolbar user={this.state.user} /> 
<RouteHandler user={this.state.user}/>

（我使用的反應路由器）。這是有效的，並且在像這樣的只讀情況下，並不可怕。然而，我的實際登錄表單組件（這是一種途徑，將裏面RouteHandler），需要一些方法來「設置」新用戶數據，因此我還需要一些回調傳遞：

<RouteHandler onAuthenticated={this.setUser} user={this.state.user}/>

不一個很大的問題，除了現在這種方法可用於由RouteHandler處理的每個「路線」。

我一直在閱讀，它似乎是唯一的選擇是EventEmitter或Dispatch式系統。

有沒有更好的方法我錯過了？事件發射器/調度器系統值得使用的時候，真的只有一個或兩個應用程序使用這個小？

來源

2015-06-30 helion3

更復雜你使用Flux嗎？在Flux應用程序中，像這樣的狀態將進入商店（例如「SessionStore」）。 –

你可以編寫一個mixin來處理'localStorage'並將用戶保存爲一個項目。 – marcel

對於單身 - 您可以爲用戶服務創建單獨的模塊，並將其導入到您定義需要它的組件的模塊中。

其他非常類似但功能更強大的選擇是使用DI容器 - 將反應組件定義爲DI容器中的服務，並與其他服務（如用戶數據）相關聯。這將更適合通用（同構）應用程序 - 因爲您可以輕鬆地用特定實現替換依賴項，或者用於需要爲單獨的作用域創建單獨實例的情況（如用戶會話服務器端）。

此外，如果使用這種方法，我會建議將純反應組分與邏輯分離 - 您可以創建單獨的純組分，接收所有數據，並將回調作爲道具，並在DI容器中創建HoC組件並會傳遞所需的數據和回調。

如果你需要DI容器 - 其中有很多，但我會建議看一下角度2 di容器，或者如果你想要更簡單的東西 - 下面我引用我的項目，它有非常簡單但功能強大DI靈感來自角度2 DI（很容易從該項目中拉出 - 只有一個文件+測試））。

關於通知組件有關的變化，並組織異步邏輯 - 你仍然需要像EventEmitter通知有關變化組件，並且您將需要編寫生命週期回調組件訂閱/從更新退訂......你可以通過手工或創建mixin或HoC來縮短這一點。

但是從我的角度來看，還有更好的方法 - 嘗試反應式編程，特別是RxJS。它的反應非常好。

如果您對連接Rx和React的選項感興趣 - 請看一下gist https://gist.github.com/zxbodya/20c63681d45a049df3fc，對於實現上述EventEmitter訂閱的HoC組件也有幫助。

我有一個項目，旨在創建同構（呈現的服務器端，並與相同的HTML重用客戶端）部件與反應。它的DI容器通過依賴關係，並使用RxJS管理異步邏輯：

https://github.com/zxbodya/reactive-widgets

來源

2015-06-30 11:00:03

的方法之一是訂閱可觀察到的從你的數據模型發出的。

Router.run(routes, Handler => 
    Model.subject.subscribe(appState => 
     React.render(
      <Handler {...appState}/>, 
      document.getElementById('app') 
     ) 
    ) 
);

... APPSTATE是從觀察到的未來（在這種情況下，模型）中的數據，使這些你的道具，所以你就可以養活他們的應用程序像下面

<RouteHandler {...this.props} />

任何子組件可以拾取它們與this.props

的答案是，這一點，但如果你看看RxJS+React你會得到簡單的數據的完整工作流實例

來源

2015-07-10 09:23:17 cmdv

在反應應用程序中共享全局/單例數據

回答

相關問題