需要在几个减速器中采取行动。反模式?

时间:2018-06-24 10:50:02

标签: reactjs redux react-redux

我正在将巨大的幻灯片项目重写/移植到React和Redux,这曾经是一个大型jQuery项目,业务逻辑存储在大型类中。

我将直接探讨我的问题。

我有三种Redux reducer,action和中间件:

  • 饲料
  • 适度
  • 幻灯片放映

提要中间件负责获取新帖子,并将其存储在feed.posts

幻灯片还原器可保持幻灯片本身的状态,以及业务逻辑,例如当前显示的帖子,接下来要显示的帖子,等等。它还应维护已过滤帖子的列表,例如。应该没有被阻止的帖子。

我面临的问题是这个

Feed中间件调度具有新帖子的操作,然后Feed精简器将帖子存储在feed.posts中。没关系的但是,现在我希望幻灯片还原器处理帖子,删除已阻止的帖子等,然后将它们存储在slideshow.posts下,而feeds.posts将始终包含原始帖子列表以用于其他目的

我当前的解决方案基本上是在幻灯片中间件中捕获新帖子动作,然后从那里分发带有新帖子的新动作,然后可以在幻灯片还原器中对其进行处理。这感觉是反模式的;使用中间件调度动作,以便可以在不同的reducer中对其进行处理。

另一种解决方案是在有新帖子时在feed中间件中调度两个动作:

  • dispatch(feedNewPosts(posts))
  • dispatch(slideshowNewPosts(posts))

通过这种方式,我可以摆脱中间件黑客攻击,但是它也带有反模式。

然后我考虑使用选择器,幻灯片容器将选择帖子并按阻止列表进行过滤,依此类推。但是该解决方案面临的问题是我需要知道哪些帖子已被阻止幻灯片还原器,因为幻灯片的大多数业务逻辑都在其中进行。

这是一个例子: 幻灯片中间件调度一个动作来显示下一张幻灯片dispatch(slideshowNextSlide())。 幻灯片还原器处理该动作并检查接下来应显示哪个幻灯片,并将该幻灯片存储为slideshow.nextSlide的状态,为动画目的在该帖子中添加标志,等等。因此,在此基础上,我需要访问幻灯片还原器中已过滤的帖子。

因此,如果这全部由复杂的选择器处理,那么在状态中,我将不会获得所需的全部信息。接下来应该放哪张幻灯片,以便我可以添加正确的动画类,等等。

我明显缺少什么吗?也许我试图在状态中存储太多信息,但是我喜欢将幻灯片的完整状态保存为状态的想法,例如。如果我要保存幻灯片放映状态并在以后加载,等等。

幻灯片容器和组件实际上是愚蠢的,仅显示状态下的内容,如果帖子匹配slideshow.nextSlide,则添加某些动画类,依此类推。没有复杂的选择器。

任何朝着正确方向的帮助将不胜感激。

谢谢。

1 个答案:

答案 0 :(得分:2)

两个减速器聆听相同的动作是完全可以的。这就是redux的好处之一:在您的应用程序上发生的某个事件可能会吸引多个组件,并且您不希望他们知道其他组件。

因此触发第二个动作将是反模式。我打算提出一项行动:

dispatch(newPosts(posts))

然后您可以让feedslideshow减速器监听相同的动作,并相应地修改其状态部分。

我认为在这种情况下,将系统中正在发生的抽象动作(根据API调用或其他结果提供新帖子)与将要收听的reduce分开是很重要的。如果这样做的话,执行一个动作来修改状态的两个不同部分的感觉就会自然得多。