草庐IT

javascript - 文本编辑器的 Redux 架构 : dealing with coupled state

coder 2025-03-31 原文

我正在使用 React/Redux 构建一个在某些方面类似于文本编辑器的应用程序。它不完全是一个文本编辑器,但它是相同的通用范例。有一个用于放置新项目的光标。可以添加、选择、删除项目等。

我正在努力寻找一种符合 redux 精神的最佳方式来构建我的 reducer。我有单独的状态切片来表示选择状态、文本本身、光标状态和其他设置。我认为“redux”方法是为每个状态切片设置缩减器,独立地改变状态以响应 Action 。

然而,在文本编辑器中,这些状态片比乍看之下更加耦合。当你按下一个键时,有时会在光标所在的位置添加一个字母,并且光标会向前移动。但是,如果选择了文本,则将首先删除所选文本。如果您处于“插入”模式,右侧的文本将被“消耗”。或者可能按下了修改键,根本没有添加文本。

换句话说,不同的状态切片是非常耦合的,其中一个发生的事情取决于其他状态的当前状态。

我读过 "Beyond Combine Reducers" section in the Redux manual并且知道如何在 slice reducer 之间共享状态,但是如果最终结果是将整个状态传递给每个 slice reducer,这似乎并不优雅。我不喜欢他的方法的另一件事是,每个 reducer 都必须查看整体状态,并独立得出相同的结论,即它对特定操作的正确响应应该是什么。那是我应该做的还是我应该以某种方式以不同的方式构建我的状态?

一个集中化简器告诉光标、选择状态、内容等如何改变的替代方案在概念上更容易,但似乎不能很好地扩展。

I've also read that many times coupled state is a sign that your state isn't minimal并且您应该重组并使用内存选择器。然而,这里似乎并非如此。光标的位置不能从文本中导出,选择状态也不能。

最后,我还考虑了 Thunk 中间件,因为这是我看到的用于处理多个/更复杂操作的建议。我很犹豫,因为它似乎更适合异步调度,但事实并非如此。

我想了解设计这种最符合“redux”设计模式的应用程序的正确方法,并了解如果有多种前进方式可能存在的任何权衡。

最佳答案

我写了"Structuring Reducers"文档部分,很高兴看到人们至少在阅读它并发现它很有用:)

你是对的,Redux reducer 逻辑的惯用意图方法是小型 reducer 函数,按状态切片组织,独立响应相同的操作。然而,这不是一个固定的要求,而且肯定有一些时候将一些逻辑整合到一个地方更有意义。

如果不了解您的状态结构是什么以及您要解决的问题到底是什么,很难给出绝对具体的建议,但总的来说,您应该随意以任何方式构建您的状态和 reducer 逻辑对您的 应用程序最有意义。如果将其中的一些逻辑放在一个更集中的 reducer 函数中,一次更新多个嵌套的状态片段会更好,那就去做吧!

作为其他一些观察结果:

根据 Redux FAQ question on "sharing state across reducers" ,一种方法是将更多信息放入已派发的操作中。例如,您可以发送 {type : "KEYSTROKE", key : "A", cursorPos : 12345,而不是发送 {type : "KEYSTROKE", key : "A"}, ctrl:真,alt:假

此外,虽然 thunk 是基本异步逻辑的好地方,但它们对于复杂的同步逻辑也很有用,包括检查当前应用程序状态。我有 a gist that demonstrates some common thunk use cases .

让我抛出一些更多的资源,可能对您有一般帮助:

(作为旁注,我目前还在撰写一篇博文,讨论 Redux 需要哪些实际技术限制以及原因,以及您“打算”使用 Redux 的方式,以及如何可能使用 Redux。我需要一段时间才能完成它,但如果您有兴趣,请关注我的博客。)

最后,如果您想进一步讨论,Discord 上的 Reactiflux 聊天 channel 是闲逛、提问和学习的好地方。邀请链接在https://www.reactiflux.com .请随时到访那里并提出问题 - 我通常在美国时间晚上在那里,但总是有一群人乐于闲逛讨论事情。

关于javascript - 文本编辑器的 Redux 架构 : dealing with coupled state,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43600076/

有关javascript - 文本编辑器的 Redux 架构 : dealing with coupled state的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2

    我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理,例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason

  5. ruby - 如何为 pbcopy 生成富文本链接 - 2

    我一直在玩一个脚本,它在Chrome中获取选定的文本并在Google中查找它,提供四个最佳选择,然后粘贴相关链接。它以不同的格式粘贴,具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式,普通网站的HTML,我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子,但它仍然输出纯文本。在文本编辑中保存文件并进行试验后,我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te

  6. ruby - Ruby 和 Ruby on Rails 中的三层架构 - 2

    我是一名决定学习Ruby和RubyonRails的ASP.NETMVC开发人员。我已经有所了解并在RoR上创建了一个网站。在ASP.NETMVC上开发,我一直使用三层架构:数据层、业务层和UI(或表示)层。尝试在RubyonRails应用程序中使用这种方法,我发现没有关于它的信息(或者也许我只是找不到它?)。也许有人可以建议我如何在RubyonRails上创建或使用三层架构?附言我使用ruby​​1.9.3和RubyonRails3.2.3。 最佳答案 我建议在制作RoR应用程序时遵循RubyonRails(RoR)风格。Rails

  7. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑,但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序,我正在尝试编辑.gitignore文件,但在我的应用程序文件夹中找不到它。我在哪里可以找到它?我安装了Git。 最佳答案 .gitignore位于项目的root中,而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑,但在OSXMountainLion上找不到文件位

  8. ruby - 如何将一段文本可逆地压缩成更少的 ASCII 字符? - 2

    我想获取任意的ASCII文本字符串,例如“Helloworld”,并将其压缩为字符数较少(尽可能少)的版本,但要采用可以解压缩的方式。压缩版本应仅由ascii字符组成。有没有一种方法可以做到这一点,尤其是在Ruby中? 最佳答案 如果知道只会使用ASCII字符,那就是每个字节的低7位。通过位操作,您可以将每8个字节混合成7个字节(节省12.5%)。如果您可以将其放入更小的范围(仅限64个有效字符),则可以删除另一个字节。但是,因为您希望压缩形式也只包含ASCII字符,所以会丢失一个字节-除非您的输入可以限制为64个字符(例如,有损压

  9. ruby-on-rails - ActiveRecord:除非另有说明,否则在保存之前使所有文本字段都调用 strip - 2

    多年来,我在各种网站上遇到过各种问题,用户在字符串和文本字段的开头/结尾放置空格。有时这些会导致格式/布局问题,有时会导致搜索问题(即搜索顺序看起来不对,但实际上并非如此),有时它们实际上会使应用程序崩溃。我认为这会很有用,而不是像我过去所做的那样放入一堆before_save回调,向ActiveRecord添加一些功能以在保存之前自动调用任何字符串/文本字段上的.strip,除非我告诉它不是,例如do_not_strip:field_x,:field_y或类定义顶部的类似内容。在我去弄清楚如何做到这一点之前,有没有人看到更好的解决方案?明确一点,我已经知道我可以做到这一点:befor

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐