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

Question

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

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

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

dispatch(actionCreator_openContextMenu(items))

...执行商店更新。动作创建者返回的Redux操作中不能包含回调，因为它们不可序列化/可jsonizable。

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

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

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

Answer 1

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

其他几个选项：

• 让对话框在关闭时调度一些“信号”动作，并使用sagas或observables执行附加的异步逻辑作为回应
• 有一个名为redux-promising-modals的有趣图书馆。我自己还没有使用它，但它似乎有一个预建的中间件和减速器，用于跟踪丢失的开放模态。每当您发送<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" /> 时，中间件都会返回一个承诺，并在您分派相应的PUSH_MODAL_WINDOW时解析承诺。

Answer 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更容易测试）