用於文本編輯器的Redux體系結構：處理耦合狀態

Question

我正在用React/Redux構建一個應用程序，它在某些方面類似於文本編輯器。這完全不是一個文本編輯器，但它是一個一般的範例。有一個光標放置新物品。項目可以添加，選擇，刪除等。

我正在努力以最好的方式來構建我的減速器，以符合redux的精神。我有單獨的狀態切片代表選擇狀態，文本本身，光標狀態和其他設置。我認爲「redux」方法應該是對這些狀態切片中的每一個進行縮減，並根據某個操作獨立地變換狀態。

但是，在文本編輯器中，這些狀態切片比第一眼更加耦合得多。當您按下某個鍵時，有時會在光標位置添加一個字母，光標會向前移動。但是，如果選擇了文字，所選文字將首先被刪除。如果您處於「插入」模式，則右側的文本將被「消耗」。或者可能是一個修飾鍵關閉，並且根本不添加文本。

換句話說，不同的狀態切片是非常耦合的，其中發生的事情取決於其他狀態的當前狀態。

我讀過"Beyond Combine Reducers" section in the Redux manual，並知道如何切片減速器之間共享狀態，但如果最終結果是通過對整個國家的每一個切片減速看起來不太優雅。我不喜歡他的方法的另一件事是，每個減速器必須查看整體狀態並獨立地得出關於它對特定動作的正確響應應該是什麼的相同結論。那是我應該做的還是我應該以某種方式對我的狀態進行不同的構造？

一個集中還原劑告訴光標，選擇狀態，內容等的替代方法在概念上更容易，但似乎不能很好地擴展。

I've also read that many times coupled state is a sign that your state isn't minimal並且您應該重構並使用memoized選擇器。但是，這似乎並不是這種情況。遊標的位置不是從文本中導出的，也不是選擇狀態。

最後，我還考慮過Thunk中間件，因爲這是我見過的處理多個/更復雜操作的建議。我很猶豫，因爲它似乎更像是用於異步調度，這不是。

我想了解正確的方法來設計這種類型的應用程序，最符合「減少」設計模式，並瞭解如果有多種方式前進可能會有任何折衷。

Answer 1

我寫了"Structuring Reducers" DOC節，所以高興地看到，人們至少讀它，發現它有用:)

你說得對，對於終極版減速器邏輯慣用預期的做法是小減速功能，按照國家的劃分組織，獨立地迴應相同的行動。但是，這不是一個固定的要求，而且有時候將某些邏輯合併到一個地方更有意義。

在沒有看到你的狀態結構是什麼以及你想要解決什麼問題的情況下給出絕對具體的建議有點困難，但總的來說，你應該可以自由地以任何方式構造你的狀態和你的reducer邏輯您的應用程序最有意義。如果在一個更集中的reducer函數中有更好的邏輯，可以同時更新幾個嵌套的狀態，那就去吧！

至於其他幾個意見：

每Redux FAQ question on "sharing state across reducers"，一種方法是把更多的信息，到派遣行動。例如，不是派遣{type : "KEYSTROKE", key : "A"}，而是派遣{type : "KEYSTROKE", key : "A", cursorPos : 12345, ctrl : true, alt : false}。此外，雖然thunk是基本異步邏輯的好地方，但它們對於複雜的同步邏輯也很有用，包括檢查當前的應用程序狀態。我有a gist that demonstrates some common thunk use cases。

讓我再折騰了一對夫婦更多資源可能是一般援助的你：

• 我React/Redux links list有鏈接到文章的writing reducers
• 我"Practical Redux" tutorial series一節演示上減速器結構有一些變化，其中包括Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers。

（作爲一個方面說明，我也是目前工作的一個博客貼子，討論終極版需要什麼實際的技術限制，爲什麼，VS，你是如何「意」使用終極版，VS它是如何的可能使用Redux的。帶我一段時間來完成它，但請關注我的博客，如果你有興趣。）

最後，如果您想進一步討論事情時，Reactiflux聊天頻道在不和諧之處是一個出去散步，提問和學習的好地方。邀請鏈接位於https://www.reactiflux.com。請隨時在那裏下來並提出問題 - 我通常在那裏晚上美國時間，但總是有一大羣人樂於討論事情。

Answer 2

似乎你正在承擔一項艱鉅的任務;可能你已經知道了，但是從頭開始創建文本編輯器並不是一件容易的事。

您是否使用現有軟件進行評估？

最近我成功地使用了超強大的Codemirror，並將它與React.js應用程序集成在一起。 Codemirror已經很好地管理了文檔狀態的概念。

這意味着：

• Codemirror實例全面管理編輯器（又名：文檔）
• 陣營環境連接到通過回調和事件的文件。

如果Codemirror不符合您的需求，請查看它的代碼和internals說明。