小编Dav*_*ave的帖子

用于文本编辑器的Redux架构:处理耦合状态

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

我正在以最符合redux精神的方式努力构建我的减速器.我有单独的状态切片,表示选择状态,文本本身,光标状态和其他设置.我认为"redux"方法是为每个状态切片设置减速器,独立地改变状态以响应动作.

但是,在文本编辑器中,这些状态切片比初看起来更加耦合.按键时,有时会在光标位置添加一个字母,光标将向前移动.但是,如果选择了文本,则将首先删除所选文本.如果您处于"插入"模式,右侧的文本将被"消耗".或者修改键可能已关闭,并且根本不添加文本.

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

我已经阅读了Redux手册中"Beyond Combine Reducers"部分并知道如何在切片减速器之间共享状态,但如果最终结果是将整个状态传递给每个切片减速器,这似乎是不优雅的.我不喜欢他的方法的另一个方面是每个减速器必须查看整体状态,并独立地得出关于它对特定动作的正确响应应该是什么的相同结论.这就是我应该做的事情,或者我应该以某种方式构建我的状态?

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

我还读到,很多时候耦合状态表明你的状态不是最小的,你应该重组并使用memoized选择器.然而,这似乎并非如此.光标的位置不能从文本中导出,也不是选择状态.

最后,我还考虑过Thunk中间件,因为这是我见过的用于处理多个/更复杂动作的建议.我犹豫不决,因为它似乎更适合异步调度,而这不是那个.

我想了解设计这种类型应用程序的正确方法,这种方法最符合"redux"设计模式,并了解如果有多种方法可能会有任何权衡.

javascript redux

5
推荐指数
1
解决办法
399
查看次数

标签 统计

javascript ×1

redux ×1