Тематическое взаимодействие с Redux и ThemeProvider - PullRequest
Новая
       29

Тематическое взаимодействие с Redux и ThemeProvider

0 голосов
/ 04 апреля 2020

В моем приложении только одна тема. 

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

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

1 Ответ

1 голос
/ 04 апреля 2020

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

Стоит ли хранить мою тему в моем магазине?

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

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

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

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

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

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

...