Storing a React element in Redux state: anti-pattern?

Question

Is it advisable or even possible to include a React element in a Redux store's state? Since it is a plain object describing "what should be drawn", I guess it should be safe, but still: any experience out there?

Why would I want to do such a thing? I'm writing an abstract React component capable of embedding other components, described elsewhere in the React tree. This would allow them, for instance, to escape from the physical boundaries of a hardware-accelerated, CSS- transform ed DOM node, used for performance.

Answer 1

Yes - as with many other similar ideas, it's possible , but is absolutely an anti-pattern because it breaks the ability to do things like time-travel debugging (one of Redux's core selling points). See the Redux FAQ at http://redux.js.org/docs/FAQ.html#organizing-state-non-serializable for further details.

Now, keeping React component classes in a React component's internal state is different, and might be useful for cases like dynamically requiring a component and re-rendering once the implementation has been downloaded.