Как обернуть компонент в HOC при помощи compose?

Question

[Slav4ka]

У меня есть HOC (ThemeProvider из @material-ui/core) в который я оборачиваю компоненту. Я хочу это сделать через compose (redux). Но не могу понять как? А именно: как передать userPalette в compose.

import {hot} from 'react-hot-loader/root';

    interface IRoutesProps {
    isTokenVerifying: boolean;
    userPalette: IPalette;
}

const Routes = ({isTokenVerifying, userPalette}: IRoutesProps) => {
    return (
        <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
            <Switch>
                 ....
            </Switch>
        </ThemeProvider>
    );
};

const mapStateToProps = (state: RootState) => ({
    isTokenVerifying: getPendingTokenVerify(state),
    userPalette: getUserPalette(state),
});

export default hot(connect(mapStateToProps)(Routes));

Есть такая идея:

const ThemeProviderContainer = ({ children, userPalette }: any) =>
    <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
        {children}
    </ThemeProvider>;

export default hot(
    compose(connect(mapStateToProps), ThemeProviderContainer),
)(Routes);

Но что-то тут не так

Answer 1

[twolegs]

HOC должен возвращать компонент, а не элемент для рендера.
В вашем случае будет как-то так:

const withTheme = Component => ({ userPalette, ...props }) => (
  <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
    <Component {...props} />
  </ThemeProvider>
);

export default compose(
  hot,
  connect(mapStateToProps),
  withTheme,
)(Routes);