主题化与Redux和ThemeProvider的反应

Question

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

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)的样式，没有重新呈现。我的应用程序中有了新的主题，但是组件有旧的风格。

我应该把我的主题存储在我的店里吗？在我的应用程序的任何部分都有可能改变主题，这是一个好方法吗？你能告诉我如何正确地组织主题吗？提前感谢！

Answer 1

根据您的评论，我发现您不是使用UI组件库，而是使用React来提供主题，而使用Redux来管理您的应用程序状态。

我应该把我的主题存储在我的店里吗？

是。因为您已经在使用Redux来处理应用程序状态，所以不需要混合React的上下文API。否则，您将解决相同的问题两次，而您的代码将更难维护。而是在Redux存储中创建一个表示UI的对象。

在我的应用程序的任何部分都有可能改变主题，这是一个好方法吗？

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

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

看看材料用户界面是如何做到的。没有比广泛使用的框架更好的指南了。

回到你最初的问题，“为什么我的应用程序主题不更新？”因为使用React的上下文API，所以需要使用使用者组件来更新提供者的值。您的上下文提供程序将将更改通知子组件，并将它们重新复制。如果使用对象赋值，则此逻辑不会运行。