How to persist the component props in redux state?

Question

My redux state seems like this.

import SearchIcon from "@material-ui/icons/Search";

const initState = {
  salesIconList: {
    Icon: TrendingUpIcon,
    color: "#ff9800",
    text: "sale analysis",
    onClick: "/sales/sales"
  }
};

The TrendingUpIcon is used for rendering specific page.

class SalesIconList extends React.Component {
  handleRoute = route => {
    this.props.history.push(route);
  };

  render() {
    children.push(
      <ButtonType
        key={v4()}
        Icon={stockIconList.Icon}
        color={stockIconList.color}
        text={stockIconList.text}
        onClick={this.handleRoute.bind(this, stockIconList.onClick)}
      />
    );
    return (
      {children}
    );
  }
}

But the TrendingUpIcon is not a serializable value, when refreshing it is no longer exist.

Answer 1

For this sort of issue, you can create a lookup hash that makes your type serialisable. For example:

import TrendingIcon from 'whevever'

const iconHash = {
  trendingIcon: TrendingIcon
}

export iconHash

Then whenever you need an icon, you store a string representation, and look it up. For example:

import iconHash from 'wheverer'

...
<ButtonType
  key={v4()}
  Icon={iconHash[stockIconList[i].Icon]}
  color={stockIconList[i].color}
  text={stockIconList[i].text}
  onClick={this.handleRoute.bind(this, stockIconList[i].onClick)}
/>

In the case above, your redux data might look like:

const initState = {
  salesIconList: {
    Icon: 'trendingIcon', // notice it is now a string
    color: "#ff9800",
    text: "sale analysis",
    onClick: "/sales/sales"
  }
}  

This is a crude example, but hopefully you get the general idea. You need to make a way to make your types serialisable.