javascript - 将函数存储在 Redux 存储中的替代方法是什么

Question

问题

我有这样的结构:

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

我希望导航栏中的 ActionButton 根据路由器(标准 ReactRouter 路由器)渲染的路由执行不同的操作

第一个想法

我的第一个想法是在商店中保存一个函数，并使用 mapStateToProps 和 connect 将该函数作为 prop 发送到 ActionButton。每当回调发生变化时，我都会调度一个以该函数作为有效负载的操作。

我很确定这应该有效，但我知道在商店中存储不可序列化的内容可能会产生负面后果。特别是，它会带来存储内容的持久化和补充问题，以及干扰时间旅行调试。 This link from the docs讨论了它并引用了一些讨论该问题的 GitHub 问题。 This StackOverflow question也讨论这个问题。

问题

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

此时，我真的不需要保留或补充存储，时间旅行调试是一个非常好的功能，但不是必须的。但是，如果有好的替代方案，我希望避免牺牲这些东西。

提前致谢! :)

Answer 1

几个选项:

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

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