如何將Flux連接到Sinatra API

Question

我正在使用React作爲Web應用程序，並且我已經開始瞭解Flux。我喜歡單向數據流的概念，但我在理解如何連接到API時遇到了一些問題。

我有一個在Sinatra寫的後端。我感到困惑的是數據如何從與組件的交互流向後端再返回？數據庫和Flux稱之爲商店是兩回事嗎？

我解釋它的方式是這樣的：

用戶與之反應查看=>

行動造物主將數據發送到後端=>

後端響應行動的創造者與互動新數據/成功/錯誤=>

動作創建者發送動作和響應於分派=>

分派器看到交流重刑，並要求根據該動作回調， 傳遞給它的後端響應=>

使用後端響應存儲更新本身=>

商店發送變更事件和數據的陣營視圖=>

的陣營視圖的渲染數=>

（循環重複）

讓我困惑的是商店是如何工作的。我需要兩個商店，比如我如何解讀它？或者後端應該是商店？

Answer 1

不，你「只是」有一家店 - 它通常有助於在一家商店 - 一個組件關係中考慮它。請注意，這應該與一粒鹽一起服用，因爲絕對有可能將多個商店連接到一個組件，反之亦然。

有可以實現後臺通信的幾種方法，但我通常的方式做它是這樣的，通常與流量的Reflux implementation（因爲我覺得它更直截了當，並遵循大致相同的概念作爲一個陣營組件） ：

var SomeStore = Reflux.createStore({ 
    getInitialState: function() { 
     //called when store is created 

     var ApiPromise = MyApi.get('/my-resource-path/'); 
     ApiPromise.success(function (data) { 
       this.data = data; 
       this.triggerUpdateOfComponent(this.data); 
     }.bind(this)); 
    } 
}); 

使用只是正常的流量實現你會做這樣的調度和應用程序開始加載時，你會觸發通過Action造物主的行動，告訴調度員開始做其工作。

爲了幫助進行商店的營銷，可以將其視爲處理與組件數據相關的邏輯和操作的容器。