Redux: Putting functions or React Component into state Tree?

[fobbyal]

This is for the use case of a front end Modal. Due to z-index/stacking context limitations, the modal needs to be as top level as possible. So I want something that wraps my app but can be used to display modal when it is needed. like below. However, I don't want to define the content of the modal beforehand. so my question is if i can keep react element in state and still be pure.

let ModalWrapper =>  ({children,modal}) =>  {
  if(modal) {
    return (
      <div>
      <div sytle={{zIndex:'10000',position:'fixed'}}>
        {modal}
      </div>
      {children}
    </div>);
  }else{
     return <div>{children}</div>;
  }
};
ModalWrapper =  connect(state=>{modal:state.modal})(ModalWrapper);

Is is frown upon if I try to keep modal which is a react component in the state tree?
if so, can i keep a function in the state tree? like below.

let ModalWrapper =>  ({children,createModal}) =>  {
  if(createModal) {
    return (<div>
      <div sytle={{zIndex:'10000',position:'fixed'}}>
        {createModal()}
      </div>
      {children}
    </div>);
  }else{
     return <div>{children}</div>;
  }
};
ModalWrapper =  connect(state=>{createModal.createModal})(ModalWrapper);

I am not sure if any of these are consider pure. Need some guidance.

Thanks in advance.

[mxstbr]

This is generally frowned upon, see the answer in the official FAQ: http://redux.js.org/docs/FAQ.html#organizing-state-non-serializable

It is highly recommended that you only put plain serializable objects, arrays, and primitives into your store. It’s technically possible to insert non-serializable items into the store, but doing so can break the ability to persist and rehydrate the contents of a store.

Instead of doing that, I'd recommend to put the content of your Modal (e.g. strings) into the state:

if (modal) {
  return (
    <div>
      <div style={{zIndex:'10000',position:'fixed'}}>
        {/* Adapt this to your common modal layout */}
        <h1>{ modal.title }</h1>
        <p>{ modal.text }</p>
      </div>
      {children}
    </div>
  );
}

[Kushagra8888]

Updated link ^
https://redux.js.org/faq/organizing-state/#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state