在 Redux 状态中存储外部提供的函数的替代方法是什么

Question

背景

我正在创建某种 React 布局库，将其当前状态存储在 Redux 存储中。该库不仅仅是一种样式，它具有某些（对于这个问题无关紧要的）功能。

但是，由于它是一个布局库，库的使用者将提供在特定位置呈现的内容。

库将通过单个切片（具有相应的缩减器、操作和选择器）公开，消费者应该简单地将其注入其根缩减器。

当前实施

目前，库知道要渲染什么的方式是由提供渲染功能的消费者。

import { register } from "layouting-lib"
// ... other imports

function CustomContent() {
  return <div> Some consumer-determined content </div>
}

// and then the consumer registers this with the library's (redux) store

dispatch(
    // register is an action creator
    register("apn-container", () => <CustomContent />)
)

这样库就知道消费者想要 <CustomContent /> 组件呈现到 apn-container 中（那是什么并不重要）。

❓问题

如您所知，Redux documentation 表示不应在状态（或动作）中使用函数，因为它们不可序列化。

那么，我还可以采取什么其他方法让我的库记住 HOW 在进行布局时呈现内容，这样我就可以正确使用redux 提供的好东西（devtools 的历史对我来说最重要）？

Answer 1

我找到的解决方案的提示基本上在 Redux 文档本身中。

他们建议拦截中间件中的不可序列化数据并将其从操作中删除这样 reducer 中就没有任何不可序列化的东西了。

就我而言，如果这些渲染函数驻留在中间件中就完全没问题。 register 操作将抓取函数，将其存储在中间件中并在没有它的情况下转发操作。

而且由于所有 registers 无论如何都应该发生在应用程序的第一次渲染之前，它甚至可以与 redux devtools 一起工作。

在 Redux 状态中存储外部提供的函数的替代方法是什么

What is an alternative to storing externally provided functions in Redux state

reactjs

redux

redux-toolkit

背景

当前实施

❓问题