Создание тем в 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), не перерисовывался. И у меня была новая тема в моем приложении, но у компонентов были старые стили.

Должен ли я хранить свою тему в своем магазине? Это хороший способ иметь возможность изменить тему в любой части моего приложения? Не могли бы вы рассказать мне, как правильно организовать тематизацию? Заранее спасибо!


reactjs redux theming
person Uladzislau Radzko    schedule 04.04.2020    source источник
comment
Почему вы должны разместить тему в своем окне? Почему вы не можете использовать контекст провайдера?   -  person Baruch    schedule 04.04.2020
comment
Я хотел быстро проверить, будет ли работать смена темы. Вот почему я поместил тему в окно.   -  person Uladzislau Radzko    schedule 04.04.2020
comment
Если вы поместите тему в объект окна, а затем измените тему объекта окна, это не отразится в React, поскольку оно находится за пределами жизненного цикла библиотеки. Чтобы изменения темы вступили в силу, они должны быть сделаны (и применены) к теме внутри библиотеки React. Используете ли вы какую-либо конкретную библиотеку пользовательского интерфейса React?   -  person Baruch    schedule 04.04.2020
comment
Нет, я не использую никакие библиотеки пользовательского интерфейса, такие как Material Design. Это правильный способ хранить мою тему в моем магазине Redux?   -  person Uladzislau Radzko    schedule 04.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Основываясь на ваших комментариях, я вижу, что вы используете не библиотеку компонентов пользовательского интерфейса, а React Context API для предоставления темы и Redux для управления состоянием вашего приложения.

Должен ли я хранить свою тему в своем магазине?

Да. Поскольку вы уже используете Redux для обработки состояния приложения, нет необходимости также смешивать React Context API. В противном случае вы решаете одну и ту же проблему дважды, и ваш код будет сложнее поддерживать. Лучше создайте объект, представляющий ваш пользовательский интерфейс в вашем магазине Redux.

Это хороший способ иметь возможность изменить тему в любой части моего приложения?

Я бы не стал слишком беспокоиться об этом. Независимо от того, используете ли вы Redux или контекстный API React, оба предоставляют вам механизм чтения и обновления глобального состояния приложения из любой точки вашего приложения. Позже вы можете решить, хотите ли вы, чтобы часть вашего глобального состояния приложения, которая обрабатывает пользовательский интерфейс, имела обработчики изменений; будь то через редукторы Redux или потребители Context API.

Не могли бы вы рассказать мне, как правильно организовать тематизацию?

Посмотрите, как это делает Material UI. Нет лучшего руководства, чем широко используемый фреймворк.

Вернемся к вашему первоначальному вопросу: «Почему тема моего приложения не обновляется?». Поскольку вы используете контекстный API React, вам необходимо использовать потребительский компонент для обновления значения вашего провайдера. Ваш поставщик контекста уведомит дочерние компоненты об изменении, и они будут перерисованы. Эта логика не работает, если вы используете назначение объекта.

person ZakDaniels99    schedule 04.04.2020