Material-ui: Redux connected components are not receiving muiTheme updates

[rafaelcorreiapoli]

Problem description

I have a root component that provides the style to child components
The theme depends on the component's state and I'm able to change the theme and see the components re-render with the new applied theme
However, any component that is wrapped on redux's connect hoc do not receive the new theme.

Versions

• Material-UI: 0.16.7
• React: 15.4.1
• Browser: 56.0.2924.87 (64-bit) on Mac OS X

[Doubl3]

As far as I know, MUI theme is used as a React context object; but Redux connect HOC doesn't propagate React context relative changes.
But you can let Redux propagates any changes by setting its connect "pure" params to 'false'.
But then, every changes will be propagated to your connected components, so your components will re-render even if they don't have to.
One way to let your components know the MUI theme's changed without triggering useless components re-rendering is to overload React lifecycle method 'shouldComponentUpdate' on your connected component.
Then, you could create a base React component class of your own overloading this method. This method should then compare React props & state + your MUI context changes the way you want (isSomethingHasChangedInMUITheme() function should implement that).

ex:

shouldComponentUpdate(nextProps, nextState) {
    if ( !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState) || (this.context.muiTheme && isSomethingHasChangedInMUITheme(this.context.muiTheme)) ) {
        return true;
    }
    return false;
}

shallowEquals only shallow checks object properties changes.

Also, I think another way would be creating a HOC modifying the way Redux connect originally behaves.

Don't hesitate to challenge me if you consider I'm wrong; I need to improve my knowledge as well.

[rafaelcorreiapoli]

Thanks for the explanation and the workaround :)
I will try and give you a feedback

[oliviertassinari]

@rafaelcorreiapoli You raised a good pain point. The theme update depends on the React rendering propagation to work correctly. Any pure component along the way might break it.

@Doubl3 Thanks for sharing this workaround.

I have been noticing another pattern used in styled-component to propagate theme update: an event system where components listen for theme updates. It's basically what react-redux is doing internally, but on the store. cc @nathanmarks

[TarikHuber]

I also had this kind of Problem :( Put I don't want to play with the React lifecycle. My solution is little bit primitive:

• store the theme into the redux state
• setup persisatance to rehidrate the theme state after full page reload
• after changing the theme in the redux state invoke a full page reload

The bad side is that every theme change needs a full page reload. But in my case a user won't change the theme all day and the theme should stay the same after he choses one.

[slavab89]

There is quite a talk about this whole context and shouldComponentUpdate at react-redux and the related PR that's linked there if anyone is interested in reading.
I dont think there will be any changes soon regarding this, at least not until react 16 or even 17 comes out - i might be mistaken of course :)

[oliviertassinari]

@slavab89 We are going to update the internal styling solution. I think that the issue will be fixed along the way. I have added it under the v1-beta milestone

[oliviertassinari]

pure rendering logic will no longer block the theme propagation, we use the same approach as react-redux