首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >文本编辑器的Redux体系结构:处理耦合状态

文本编辑器的Redux体系结构:处理耦合状态
EN

Stack Overflow用户
提问于 2017-04-24 17:24:51
回答 2查看 704关注 0票数 6

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

我正在努力寻找最好的方法来构造我的减速器,以一种符合redux精神的方式。我有表示选择状态、文本本身、光标状态和其他设置的单独的状态片。我认为"redux“的方法应该是为每个状态片设置还原剂,对一个动作独立地变异状态。

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

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

我已经阅读了Redux手册中的“超越联合收割机”一节,并且知道如何在片减法器之间共享状态,但是如果最终结果是将整个状态传递给每个片减法器,这似乎是不雅的。我不喜欢他的方法的另一件事是,每个减速器都必须观察整个状态,并且独立地得出关于它对特定行为的正确反应的相同结论。这是我应该做的还是我应该以不同的方式构建我的状态?

一个集中式还原器告诉游标、选择状态、内容等如何进行变异的替代方案在概念上更容易,但似乎不太适合。

我也读过很多次耦合状态是一个迹象,表明你的状态不是最小的和你应该重组和使用回忆录选择器。然而,这里的情况似乎并非如此。光标的位置不能从文本派生,也不能从选择状态派生。

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

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-25 07:51:29

我编写了“结构减速器”文档部分,很高兴看到人们至少阅读了它并发现它有用:)

您说得对,Redux还原器逻辑的惯用方法是小的还原器函数,由状态片组织,独立地响应相同的操作。然而,这不是一个固定的需求,而且肯定有一些时候,将一些逻辑合并到一个地方更有意义。

在不了解您的状态结构以及您正试图解决的问题的情况下,给出绝对具体的建议有点困难,但总的来说,您应该感到可以自由地以任何对您的应用程序最有意义的方式来构建您的状态和还原器逻辑。如果在一次更新多个嵌套状态的更集中的还原器函数中有一些这样的逻辑更好,那就去做吧!

作为其他几点意见:

根据关于“减速机共享状态”的剩余常见问题,一种方法是将更多的信息放入调度操作中。例如,您可以分派{type : "KEYSTROKE", key : "A"},而不是分派{type : "KEYSTROKE", key : "A", cursorPos : 12345, ctrl : true, alt : false}

此外,虽然块对于基本异步逻辑来说是一个很好的位置,但是它们也对复杂的同步逻辑很有用,包括检查当前的应用程序状态。我有演示一些常见的使用案例的要点

请让我再放弃几个可能对你有一般性帮助的资源:

(作为附带说明,我目前还在写一篇博客文章,其中将讨论Redux所需的实际技术限制,以及您如何“打算”使用Redux,以及如何使用Redux。我需要一段时间才能完成它,但是如果你感兴趣的话,请留意我的博客。)

最后,如果你想进一步讨论一些事情,关于不和的反应通量聊天频道是一个很好的地方来闲逛,问问题,学习。invite链接位于https://www.reactiflux.com。请随便过来问我一些问题--我通常在美国时间的晚上,但总有一群人在外面闲聊。

票数 5
EN

Stack Overflow用户

发布于 2017-04-25 02:08:46

似乎您正在承担一项艰巨的任务;也许您已经知道这一点,但是从头开始创建文本编辑器并不是一件容易的事情。

您是否使用现有的软件进行评估?

最近,我成功地使用了超级强大的Codemirror,并将其与React.js应用程序集成。Codemirror已经很好地管理了文档状态的概念。

这意味着:

  • Codemirror实例完全管理编辑器(AKA:文档)
  • React环境通过回调和事件附加到文档。

如果Codemirror不适合您的需要,请查看它的代码和内件描述。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43600076

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文