使用 react-redux，通过 redux 状态将回调函数传递给通用组件的最佳做法是什么？
Using react-redux, what is the best practice to pass a callback function to a generic Component through the redux state?
这是一个简单的案例，我想创建一个带有确认按钮的通用模态组件。单击按钮后，它将触发我们通过 redux 状态提供的 onConfirm 函数。并且可以在 thunk 动作中调度 openModal 动作。
//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-toolkit 时，会产生错误信息“A non-serializable value was detected in the state”。所以我想知道执行此类操作的最佳做法是什么。
其他用例：
- 向状态发送回调函数并联系网络套接字服务器。然后 websocket 服务器与触发 callbcak 的东西进行通信。
简单模态 CodeSanbox: https://codesandbox.io/s/black-mountain-wnytg?file=/src/containers/App.js
最好的做法是不要在 redux 中存储任何函数（尽管它在技术上是可行的）。相反，您应该存储调用回调所需的任何参数，并使用动作创建者函数实际进行调用。在您的示例中，您可以存储 modalType、modalTitle 等
这是一个简单的案例，我想创建一个带有确认按钮的通用模态组件。单击按钮后，它将触发我们通过 redux 状态提供的 onConfirm 函数。并且可以在 thunk 动作中调度 openModal 动作。
//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-toolkit 时，会产生错误信息“A non-serializable value was detected in the state”。所以我想知道执行此类操作的最佳做法是什么。
其他用例：
- 向状态发送回调函数并联系网络套接字服务器。然后 websocket 服务器与触发 callbcak 的东西进行通信。
简单模态 CodeSanbox: https://codesandbox.io/s/black-mountain-wnytg?file=/src/containers/App.js
最好的做法是不要在 redux 中存储任何函数（尽管它在技术上是可行的）。相反，您应该存储调用回调所需的任何参数，并使用动作创建者函数实际进行调用。在您的示例中，您可以存储 modalType、modalTitle 等