使用 React-Redux 创建上下文菜单答案

【问题标题】：Creating a Context Menu with React-Redux使用 React-Redux 创建上下文菜单
【发布时间】：2017-10-15 03:55:19
【问题描述】：

我们在大部分 React 应用程序中使用 Redux。我们挣扎的一个领域是上下文菜单。到目前为止，它是这样工作的：

onRightClick -> createItems -> openMenu -> onItemClick: invoke callback and close menu

所以我们在每个项目被点击时都有一个回调。使用 Redux，这不再适用，因为：

dispatch(actionCreator_openContextMenu(items))

... 执行存储更新。动作创建者返回的 Redux 动作其中不能有回调，因为它们不是可序列化/可json化的。

我们还需要在许多上下文菜单点击操作中执行异步操作（即服务器往返），因此点击操作不是普通的商店更新。

问题是：这如何与 Redux 模式及其约束保持一致？如何使用 Redux 做到这一点？

澄清一下：这个问题不是关于反应中的 UI 方面，而是关于 redux。

【问题讨论】：

标签： javascript redux contextmenu react-redux

【解决方案1】：

我实际上写了一篇文章来涵盖这个确切的问题：Creating Reusable Generic Modals in React and Redux。我在那篇文章中描述的方法可以概括为让请求对话框的代码包含一个预制的动作对象，该对象作为道具传递给对话框组件，然后对话框可以调度该动作（可能附加附加信息) 关闭时。

其他几个选项：

让对话框在关闭时调度一些“信号”操作，并使用 sagas 或 observables 执行额外的异步逻辑作为响应
有一个看起来很有趣的库，名为redux-promising-modals。我自己还没有使用过它，但它似乎有一个预构建的中间件和减速器，用于跟踪丢失的开放模式。每当您发送 PUSH_MODAL_WINDOW 时，中间件都会返回一个 Promise，并在您发送相应的 POP_MODAL_WINDOW 时解析该 Promise。

【讨论】：

感谢您的回答。我们的内部讨论类似。 “只需包含一个调用关闭的动作” - “但我们需要一个异步动作创建者！” - “那就使用 Redux Saga！” ......我就像“什么？用炮弹射击鸟？来吧，必须有一个更简单的方法来做到这一点。”显然我错了。我想 Redux 确实有它的阴暗面。不过，感谢您的全面回答。
对于它的价值，你可以在动作对象中包含函数，Redux 本身就可以工作 - 它主要是时间旅行调试可能有问题。有关详细信息，请参阅 redux.js.org/docs/faq/Actions.html#actions-string-constants 和 blog.isquaredsoftware.com/2017/05/…。 Redux-Saga 是适用于这种基于分派动作的分布式/异步行为的用例。

【解决方案2】：

我认为您正在寻找的是可以处理异步副作用的 redux 中间件。有几十个库可以帮助解决这个问题，但我建议您的团队研究以下一些拥有良好社区且文档齐全的库：

Redux-Saga https://github.com/redux-saga/redux-saga（易于理解和测试）
Redux-Thunk https://github.com/gaearon/redux-thunk（非常容易理解，很难测试）
Redux-Observable https://redux-observable.js.org/（你需要一些响应式编程的知识，比 redux-thunk 更容易测试）

【讨论】：