在Redux存储中存储功能的替代方法是什么

Question

问题

我有这样的结构：

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

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

最初的想法

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

我很确定这应该可行，但是我知道在商店中存储不可出售的东西会带来负面影响。 特别是，它给存储内容的持久化和重新补充水分以及干扰时间旅行调试带来了问题。 文档中的此链接对此进行了讨论，并引用了讨论该问题的一些GitHub问题。 这个StackOverflow问题也讨论了这个问题。

题

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

在这一点上，我真的不需要持久化或重新存储商店，并且进行时间旅行调试非常好，但不是必须的。 但是，如果有不错的选择，我想避免牺牲这些东西。

提前致谢！ :)

Answer 1

几个选项：

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

在我的实践Redux，第10部分：管理模态和上下文菜单中，展示了预定义操作方法的示例。

Answer 2

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

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