时间戳

首页 > 解决方案 > 在 React 中使用 Redux 和 ThemeProvider 进行主题化

reactjs - 在 React 中使用 Redux 和 ThemeProvider 进行主题化

问题描述

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

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

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

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

当我在不同的文件中更改 window.theme 时

Object.assign(window.theme, newTheme)

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

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

标签： reactjsreduxtheming

解决方案

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

我应该将我的主题存储在我的商店中吗？

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

有可能在我的应用程序的任何部分更改主题是一种好方法吗？

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

你能告诉我如何正确组织主题吗？

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

回到您最初的问题，“为什么我的应用主题没有更新？”。由于您使用 React 的 Context API，因此您需要使用消费者组件来更新您的提供者的值。您的上下文提供者将通知子组件更改并且它们将重新呈现。如果您使用对象分配，则此逻辑不会运行。

推荐阅读