问题
我有这样的结构:
<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 钻孔，但我真的很想避免这种模式。
此时，我真的不需要保留或补充存储，时间旅行调试是一个非常好的功能，但不是必须的。但是，如果有好的替代方案，我希望避免牺牲这些东西。
提前致谢! :)
最佳答案
几个选项:
- 使用中间件监听
“ACTION_BUTTON_CLICKED”操作，并根据其他值(存储状态、路由等)运行不同的逻辑。这可以是您自己编写的自定义中间件，也可以是通用副作用中间件，例如 redux-saga 或 redux-observable，让您可以响应分派(dispatch)的操作。 - 根据其他行为将预定义操作放入存储中，并在单击按钮时调度该操作。
我在我的帖子 Practical Redux, Part 10: Managing Modals and Context Menus 中展示了预定义操作方法的示例.
关于javascript - 将函数存储在 Redux 存储中的替代方法是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53888703/