在Redux存储中存储函数的替代方案是什么

Question

问题

我有这样的结构：

<MenuBar />
<NavigationBar>
  <irrelevant stuff here />
  <ActionButton />
</NavigationBar>
<Router>
  <Route ...>
</Router>

我希望NavigationBar中的ActionButton根据路由器（标准ReactRouter路由器）呈现的路由做出不同的操作

第一个想法

我的第一个想法是在商店中保存一个函数，并使用mapStateToProps和connect，将该函数作为道具发送给ActionButton。每当回调发生变化时，我都会调度一个功能为有效载荷的动作。

我非常确定这应该可行，但是我知道在商店中存储不可出售的商品会带来负面影响。特别是，它给存储内容的持久化和重新补充水分以及干扰时间旅行调试带来了问题。 This link from the docs对此进行了讨论，并引用了其中讨论的某些GitHub问题。This StackOverflow question还讨论了该问题。

问题

我见过很多人说“你不应该那样做”的地方，但是我还没有看到在商店中存储函数的替代方法。我可以想到的替代方法是使用道具钻孔，但是我真的很想避免这种模式。

在这一点上，我真的不需要持久存储或为商店补水，时间旅行调试非常有用，但不是必须的。但是，如果有很好的选择，我想避免牺牲这些东西。

提前谢谢！ ：）

Answer 1

几个选项：

• 使用中间件侦听"ACTION_BUTTON_CLICKED"动作，并根据其他值（存储状态，路线等）运行不同的逻辑。这可能是您自己编写的自定义中间件，也可能是诸如redux-saga或redux-observable之类的通用副作用中间件，可让您响应已调度的动作。
• 根据其他行为将预定义的动作放入商店，并在单击按钮时分派该动作。

我在帖子Practical Redux, Part 10: Managing Modals and Context Menus中展示了预定义操作方法的示例。

Answer 2

您可以将react-router的状态放入您的redux存储中。然后，当导航状态更改时，您可以从NavigationBar或ActionButton中访问当前路线。

您可以存储逻辑，以根据ActionButton或NavigationBar中的路线确定按钮的作用。