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

Question

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

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

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

dispatch(actionCreator_openContextMenu(items))

...执行商店更新。动作创建者返回的 Redux 动作 中不能有回调 ，因为它们不是 serializable/jsonizable.

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

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

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

Answer 1

我认为您正在寻找的是可以处理异步副作用的 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 更容易测试）

Answer 2

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

其他几个选项：

让对话框在关闭时分派一些 "signal" 操作，并使用 sagas 或 observables 在响应中执行额外的异步逻辑
有一个看起来很有趣的库，叫做 redux-promising-modals。我自己还没有使用过它，但它似乎有一个预构建的中间件和缩减器来跟踪丢失的打开模式。中间件 returns 一个 promise 每当你发送 PUSH_MODAL_WINDOW，并且会在你发送相应的 POP_MODAL_WINDOW.

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

Creating a Context Menu with React-Redux

javascript

contextmenu

redux

react-redux