在Redux状态下存储ref是不好的做法吗?

时间:2020-09-27 14:20:25

标签: reactjs redux react-redux

将父ref存储在redux store中是不好的做法吗?如果可以,请指出原因。 我当前的任务是将可滚动容器作为父组件,并且它具有许多深子级组件,其中一些是第五级,并且需要从子组件控制此父可滚动容器。我当然可以通过孩子,但是通过redux会很方便。

我不认为为此使用redux状态是错误的,但是我遇到了一些人们不建议使用的文章,但是没有明确的解释。

1 个答案:

答案 0 :(得分:3)

状态应仅包含可序列化的项,请参见Can I put functions, promises, or other non-serializable items in my store state?

强烈建议您仅将简单的可序列化对象,数组和基元放入存储中。

对于您的问题,它说明:

从技术上讲,可以将不可序列化的项目插入到商店中,但是这样做会破坏保留和重新存储商店内容的能力,并干扰时间旅行调试。

使用redux-toolkit甚至会警告您。

Ref对象是一个不可序列化的项目,更糟糕的是,当您卸载可能导致未定义行为的组件时,它不会持久存在。

另一方面,使用Context API传递ref是一个很好的解决方案。尽管我会重新考虑设计并在某些图层上使用useImperativeHandle(将ref传递到第五层肯定是code smell)。