使用 Redux 和 ThemeProvider 在 React 中设置主题

Question

我的应用中只有一个主题。

ReactDOM.render(
    <Provider store={store}>
        <ThemeProvider theme={theme}>
            <App />
        </ThemeProvider>
    </Provider>,
    root,
);

我想要一些主题并且可以动态地改变它们。当我尝试将我的主题放入 window 对象并在应用程序期间更改它时，我发现我的样式没有改变。我的意思是，我有以下代码

<ThemeProvider theme={window.theme}>
    <App />
</ThemeProvider>

当我在

等不同文件中更改 window.theme 时

Object.assign(window.theme, newTheme)

我的具有 Component.style.js（带有 jss）样式的组件文件没有重新呈现。我的应用程序中有新主题，但组件有旧样式。

我应该将我的主题存储在我的商店中吗？有可能在我的应用程序的任何部分更改主题是一种好方法吗？你能告诉我如何正确组织主题吗？提前致谢！

Answer 1

根据您的意见，我发现您没有使用 UI 组件库，而是使用 React Context API 来提供主题，并使用 Redux 来管理您的应用程序状态。

Should I store my theme in my store?

是的。由于您已经在使用 Redux 来处理应用程序状态，因此也没有必要混入 React 的 Context API。否则，您将两次解决相同的问题，并且您的代码将变得更加难以维护。而是在你的 Redux 商店中创建一个代表你的 UI 的对象。

Is it a good way to have the possibility to change a theme in any part of my application?

我不会太担心这个。无论您使用 Redux 还是 React 的 Context API，两者都为您提供了一种从应用程序中的任何位置读取和更新全局应用程序状态的机制。您可以稍后决定是否希望处理 UI 的全局应用程序状态部分具有更改处理程序；无论是通过 Redux reducer 还是 Context API 的消费者。

Could you tell me how to organize theming correctly?

看看Material UI是怎么做到的。没有比广泛使用的框架更好的指南了。

回到你最初的问题，"Why doesn't my app theme update?"。由于您使用 React 的上下文 API，您需要使用消费者组件来更新提供者的值。您的上下文提供程序将通知子组件更改，它们将重新呈现。如果您使用对象分配，则此逻辑不会运行。

使用 Redux 和 ThemeProvider 在 React 中设置主题

Theming in React with Redux and ThemeProvider

theming

reactjs

redux