I have a React app with Material UI. The dark mode basically works, but anytime I try to change the dark mode state on a page where the page is rendered from redux state data, the whole page crashes. I assume because it loses the redux state:
Warning: Failed prop type: The prop `items` is marked as required in `WarehouseTable`, but its value is `null`.
Which is correct because the Theme wraps the whole App, so all children object re-render itself.
What I don't know is why the redux state is not preserved. Why it seems that the redux state is lost?
How can I handle this?
The problem for me was that the ReduxProvider and the ThemeProvider was rendered in the same function.
So I moved the ThemeProvider to a ReduxProvider child component and this solved my issue.
You can try by moving redux wrapper around the mui wrapper
<ReduxProvider>
<ThemeProvider>
<App/>
</ThemeProvider>
</ReduxProvider>