如何處理React / Flux組件中的狀態轉換

Question

鑒於我有一個基於AJAX的搜索字段對用戶輸入作出反應，通過AJAX從后端請求搜索結果，在搜索字段下方的下拉列表中顯示結果，允許通過光標鍵瀏覽搜索結果並對esc鍵按下一種聰明的方式。

由於當前基於Backbone的組件在很多方面被打破，我想使用React和Flux架構重新實現該搜索組件。

在計划過程中，我的組件至少有10個不同的狀態（可能更多），它必須對用戶輸入觸發的actions做出反應，並對異步服務器響應觸發的actions做出反應。

問題1 ：我應該在store而不是父組件中建模所有狀態嗎？ 這意味着，每個用戶輸入都會更改存儲狀態，例如:searchQuery ， :searchResults和我的父視圖組件對該狀態的變化做出反應？

問題2 ：或者我應該在父組件本身中建模所有狀態並完全省略store ， dispatcher和actions ？

問題3 ：事實證明，獨立於處理store或父組件本身的狀態，組件本身至少可以有10種不同的狀態，並且應該只允許一定數量的轉換。 通常，我在這里引入一個statemachine實現，模型all :states和allowed :transitions每次store收到一個動作時:transitions和執行轉換，或者在父組件中調用一個回調方法。 處理組件中這些states之間的states和transitions的正確React way是什么？

問題4 ：Javascript中最先進的Flux實現是哪一個？ 到目前為止，我已經看到了反流 ，但我不確定，這是我的毒葯。

我願意接受各種建議。

Answer 1

我現在正在使用flux在React構建類似的組件，過去我曾與Backbone一起工作過，所以我希望能給你一些見解。

我的猜測是你的Backbone解決方案在你的搜索視圖中有一個本地模型，它建立了:searchQuery在更新字段時的:searchQuery 。 在ajax回調中，您很可能只是直接更新了:searchResults 。

1-2：

有了flux ，最終會有更多的樣板代碼，但根據我的經驗，如果我不建立一個商店開始我總是后悔。 話雖這么說，我會為:searchResults創建一個SearchStore ，並將:searchQuery保持在父組件的狀態。

這樣，當您准備調用搜索時，您可以使用視圖操作SearchViewActions.getSearchResults(:searchQuery)進行ajax調用，並在回調中調用SearchServerActions.receiveSearchResults(:searchQuery, :searchResults)並更新商店。 然后，您的結果組件可以偵聽Store更改，並在看到更改時調用SearchStore.getResults() 。 這有助於模塊化兩個子組件，其中選項2將兩個組件緊密耦合，並使外部組件重用變得更加困難。

3：

我喜歡你的狀態機的解決方案，你可以問你是否允許進行轉換並返回一組要更新的屬性，或者根據該信息執行調用setState({...})的函數。

4：

反流看起來很棒，因為它似乎減少了樣板。 然而，回流可能會或可能不會像股票Flux那樣表現。

讓我知道它是怎么回事，因為你的策略可以幫助我改善我的結構。