使用react redux，通过redux状态将回调函数传递给通用组件的最佳实践是什么

Question

这里有一个简单的例子，我想创建一个带有确认按钮的通用模态组件。一旦点击该按钮，它将启动我们通过redux状态提供的onConfirm功能。openModal操作可以在thunk操作中进行调度。

//Example using thunk after click submit a form
const handleSubmitForm = dispatch => e => {
dispatch(openModal({
title: "confirm modal",
onConfirm: () => { /* dispatch other stuff, async etc..)*/ }
}))
}

然而，问题是redux建议不要将任何不可序列化的值(如函数(传递给状态。并且在使用redux工具箱时，它会生成一条错误消息"在状态"中检测到一个不可串行化的值；。所以我想知道执行这种动作的最佳做法是什么。

其他用例：

• 将回调函数分派到状态并联系web套接字服务器。然后，websocket服务器与触发callbcak的东西进行通信

简单模式代码Sanbox:https://codesandbox.io/s/black-mountain-wnytg?file=/src/containers/App.js

Answer 1

最佳实践是不在redux中存储任何函数(尽管从技术上讲它是可行的(。相反，您应该存储调用回调所需的任何参数，并使用操作创建者函数实际进行调用。在您的示例中，您可能存储modalType、modalTitle等