MapStateToProps в каждый компонент, правильно ли я делаю?

Question

[javanub]

У меня есть разные компоненты. Я хочу реализовать смену тем. С темной на светлую. Каждый компонент должен знать, какая сейчас тема и в зависимости от темы добавлять класс в DOM. Скажите, правильно ли я делаю, что добавляю в каждый компонент эту функцию, или можно как-то избежать дублирования:

// сюда приходит навазние темы: 'light', 'dark';
const mapStateToProps = state => ({
theme: state.theme
});

И уже дальше я делаю примерно так через пропсы: l-header__info l-header__info--(название темы)

Comments

[Кирилл]

а что мешает сделать 2 css файла с одинаковыми классами и в зависимости от темы подключать нужный css?

[javanub]

Кирилл Кубляков, а если надо будет потом в один класс добавить, а во второй забуду? Пока мой вариант проще тем, что в любой момент могу легко править css и не париться о билде второго css

[Егор Живагин]

А может есть смысл давать класс с темой только главной обёртке? И не надо во все компоненты стейт пропихивать, и как-то попроще будет со стилями:

.l-header__info {
// Не кастомизируемые стили
}

.theme-light .l-header__info{
// Стили для светлой темы
}

.theme-dark .l-header__info{
// Стили для тёмной темы
}

[javanub]

Тоесть пропихнуть, только в родители, так? Например хедер и для контента, а дальше уже через глобальные, или вложенные стили стучаться к вложеным элементам dom структуры? Я верно понял?

Answer 1

[Антон Спирин]

Тему удобней передавать через Context API.
В Styled Components и похожих решениях удобный theming из коробки.

Comments

[javanub]

да, но на проекте redux. )
Получается, что мое решение тоже ок?

[Антон Спирин]

javanub,

да, но на проекте redux. )

И что это меняет? Правильней перенести в контекст. Иначе у вас при любом обновлении store, будут лишние вызовы внутри компонентов оберток, в которые оборачивает ваши компоненты вызов connect.

Answer 2

[profesor08]

На мой взгляд достаточно только для одного, самого главного компонента задать тему, а в стилях отталкиваться от нее. Так как если ты будешь пропихивать стейт в каждый компонент, ты получишь проблемы с производительностью, кучу дублирующегося кода и гемора все это раз за разом прописывать. Вот если сменится тема, то каждому компоненту будет задан соответствующий класс, а потом применены стили, куча вычислений. Это ненужно.

Comments

[javanub]

Тоесть например навесить дарк на бади, а дальше уже через вложенный css или глобально менять?

[javanub]

Или пропихнуть, стейт только для хедер и для контента, а дальше уже через глобальные, или вложенные стили стучаться к вложенным элементам dom структуры? Я верно понял?

[profesor08]

javanub, да