Q:

Are complex objects permitted inside a redux store?

I am working on a React app with Redux and I saw something unusual. We put a DOM element inside the store at one point. This makes problems with the Redux extension which will freeze when the action is called, but otherwise the app is acting well.
Our code look like this:
function theAction(domElement) { // We got domElement with getElementById
    return {
        type: "THE_ACTION",
        domElement
    };
}

Then in our reducer, we simply put the DOM element inside the store:
function theReducer(state, action) {
    switch (action.type) {
    case "THE_ACTION":
        return {
            ...state,
            domElement: action.domElement,
        };
    }
}

DOM elements are complex object with reference cycle and special properties, so I wasn't sure of the rules here. So am I breaking a precondition putting a DOM element inside an action and am I breaking a precondition putting a DOM element inside the store?

A:

No, non-serializable objects are explicitly not allowed inside dispatched actions or the Redux store.

