Тёмная тема в React с помощью Redux-toolkit

Эта статья является продолжением статьи Тёмная тема в React с использованием css переменных в scss. Если в прошлый раз мы добавляли тёмную тему через родной реактовский контекст, то сейчас мы попробуем сделать всё то же самое, но с помощью Redux, точнее redux-toolkit

• Репозиторий -- ветка habr

• Демо

Roadmap

Мы проделаем почти те же шаги, что и в прошлый раз:

1. Run-up Создадим create-react-app проект и немного поправим структуру

2. Redux Добавим компонент переключателя темы с redux-состоянием

3. CSS Variables Объявим переменные для каждой темы, которые будут влиять на стили компонентов

4. Bonus Добавим роутинг

1. Подготовка

1. С помощью create-react-app создаём проект и сразу добавляем sass и classnames для удобства работы со стилями

> npx create-react-app with-redux-theme --template redux
> cd with-redux-theme
> npm i sass classnames -S

2. Поскольку все дальнейшие действия мы будем производить, находясь в папке /src, то для удобства перейдем в неё

> cd src

3. Удалим ненужные файлы

# находимся внутри папки /src
> rm -rf app features App.css App.js App.test.js index.css logo.svg

4. Создадим удобную структуру приложения

# находимся внутри папки /src
> mkdir -p components/Theme
> touch index.scss root.js store.js
> touch components/Theme/{index.js,index.module.scss,slice.js}

Поддерево проекта внутри папки /src должно получиться таким

# перейдем в корень и проверим структуру
> tree src
src
├── components
│   └── Theme
│       ├── index.js
│       ├── index.module.scss
│       └── slice.js
├── index.js
├── index.scss
├── root.js
├── store.js
└── ...

Теперь будем писать код.

Поскольку мы внесли изменения в структуру, то перепишем наш src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'

import Root from './root'
import store from './store'

import './index.scss'

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
const root = ReactDOM.createRoot(rootElement)

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Root />
    </Provider>
  </React.StrictMode>
)

Вместо App.js я использую файл root.js с компонентом Root, который в конце концов у нас будет хранить роуты на страницы, но а пока...

// src/root.js
const Root = () => (
	<div>There are will be routes</div>
)

export default Root

Теперь можно приступить ко второй части - написание самой логики изменения темы

2. Добавляем логику для темы

Сконфигурируем наш стор. В нем у нас будет один лишь редьюсер темы. Делаем его по аналогии с counter, который шел из коробки, только наш будет попроще.

// src/store.js
import { configureStore } from '@reduxjs/toolkit'
import themeReducer from './components/theme/slice'

export const store = configureStore({
  reducer: {
    theme: themeReducer,
  },
})

Теперь реализуем сам редьюсер с остальной логикой, необходимой для работы темы.

// src/components/theme/slice.js
import { createSlice } from '@reduxjs/toolkit'

// пытаемся получить тему из локального хранилища браузера
// если там ничего нет, то пробуем получить тему из настроек системы
// если и настроек нет, то используем темную тему
const getTheme = () => {
  const theme = `${window?.localStorage?.getItem('theme')}`
  if ([ 'light', 'dark' ].includes(theme)) return theme

  const userMedia = window.matchMedia('(prefers-color-scheme: light)')
  if (userMedia.matches) return 'light'

  return 'dark'
}

const initialState = getTheme()

export const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    set: (state, action) => action.payload,
  },
})

export const { set } = themeSlice.actions

export default themeSlice.reducer

На этом этапе у нас всё работает, но нет компонента, который бы изменял тему.
Реализуем его:

// src/components/theme/index.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import cn from 'classnames'

import { set } from './slice'
import styles from './index.module.scss'

const Theme = ({ className }) => {
  const theme = useSelector((state) => state.theme)
  const dispatch = useDispatch()

  React.useEffect(() => {
    document.documentElement.dataset.theme = theme
    localStorage.setItem('theme', theme)
  }, [ theme ])

  const handleChange = () => {
    const next = theme === 'dak' ? 'light' : 'dark'
    dispatch(set(next))
  }

  return (
    <div
      className={cn(
    		className,
    		styles.root,
    		theme === 'dark' ? styles.dark : styles.light)}
      onClick={handleChange}
    />
  )
}

export default Theme

// src/components/theme/index.module.scss
.root {
	position: relative;
  border-radius: 50%;
  display: block;
  height: 24px;
  overflow: hidden;
  width: 24px;
  transition: 0.5s all ease;
  input {
    display: none;
  }
  &:hover {
    cursor: pointer;
  }
  &:before {
    content: "";
    display: block;
    position: absolute;
  }
  &.light:before {
    animation-duration: 0.5s;
    animation-name: sun;
    background-color: var(--text-color);
    border-radius: 50%;
    box-shadow: 10px 0 0 -3.5px var(--text-color),
      -10px 0 0 -3.5px var(--text-color),
      0 -10px 0 -3.5px var(--text-color),
      0 10px 0 -3.5px var(--text-color),
      7px -7px 0 -3.5px var(--text-color),
      7px 7px 0 -3.5px var(--text-color),
      -7px 7px 0 -3.5px var(--text-color),
      -7px -7px 0 -3.5px var(--text-color);
    height: 10px;
    left: 7px;
    top: 7px;
    width: 10px;
    &:hover {
      background-color: var(--background-color);
      box-shadow: 10px 0 0 -3.5px var(--background-color),
                  -10px 0 0 -3.5px var(--background-color),
                  0 -10px 0 -3.5px var(--background-color),
                  0 10px 0 -3.5px var(--background-color),
                  7px -7px 0 -3.5px var(--background-color),
                  7px 7px 0 -3.5px var(--background-color),
                  -7px 7px 0 -3.5px var(--background-color),
                  -7px -7px 0 -3.5px var(--background-color);
    }
  }
  &.dark {
    &:before {
      animation-duration: .5s;
      animation-name: moon;
      background-color: var(--text-color);
      border-radius: 50%;
      height: 20px;
      left: 2px;
      top: 2px;
      width: 20px;
      z-index: 1;
      &:hover {
        background-color: var(--background-color);
      }
    }
    &:after {
      animation-duration: .5s;
      animation-name: moon-shadow;
      background: var(--background-color);
      border-radius: 50%;
      content: "";
      display: block;
      height: 18px;
      position: absolute;
      right: -2px;
      top: -2px;
      width: 18px;
      z-index: 2;
    }
  }
}

@keyframes sun {
  from {
    background-color: var(--background-color);
    box-shadow: 0 0 0 -5px var(--background-color),
                0 0 0 -5px var(--background-color),
                0 0 0 -5px var(--background-color),
                0 0 0 -5px var(--background-color),
                0 0 0 -5px var(--background-color),
                0 0 0 -5px var(--background-color),
                0 0 0 -5px var(--background-color),
                0 0 0 -5px var(--background-color);
  }
  to {
    background-color: var(--text-color);
    box-shadow: 10px 0 0 -3.5px var(--text-color),
                -10px 0 0 -3.5px var(--text-color),
                0 -10px 0 -3.5px var(--text-color),
                0 10px 0 -3.5px var(--text-color),
                7px -7px 0 -3.5px var(--text-color),
                7px 7px 0 -3.5px var(--text-color),
                -7px 7px 0 -3.5px var(--text-color),
                -7px -7px 0 -3.5px var(--text-color);
  }
}

@keyframes moon {
  from {
    height: 0;
    left: 12px;
    top: 12px;
    width: 0;
  }
  to {
    height: 20px;
    left: 2px;
    top: 2px;
    width: 20px;
  }
}

@keyframes moon-shadow {
  from {
    background-color: var(--background-color);
    height: 0;
    right: 7px;
    top: 7px;
    width: 0;
  }
  to {
    background-color: var(--background-color);
    height: 18px;
    right: -2px;
    top: -2px;
    width: 18px;
  }
}

Добавим наш компонент Theme на главную страницу.

// src/root.js
import Theme from './components/Theme'

const Root = () => (
  <>
    <h1>Тёмная тема в React с помощью Redux-toolkit</h1>
	  <Theme />
  </>
)

export default Root

И чтобы все заработало как надо, нужно задать переменные для каждой темы. Задавать мы их будем через css переменные, поскольку те переменные, которые используются в scss нам не подойдут. scss компилится в css довольно глупо, он просто подставляет значения переменных во всех местах, где они фигурируют.

// src/index.scss
:root[data-theme="light"] {
  --background-color: #ffffff;
  --text-color: #1C1E21;
}

:root[data-theme="dark"] {
  --background-color: #18191a;
  --text-color: #f5f6f7;
}

body {
  background: var(--background-color);
  color: var(--text-color);
}

Ура! Все работает! И теперь обещанный бонус - добавление роутов

Добавляем роутинг

Для начала установим библиотеку

> npm i react-router-dom -S

Обернем все в провайдер BrowserRouter от react-router

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'

import * as serviceWorker from './serviceWorker'
import Root from './root'
import store from './store'

import './index.scss'

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
const root = ReactDOM.createRoot(rootElement)

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <Root />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
)

serviceWorker.unregister()

Теперь можно в файле src/root.js добавить такой код

import { Routes, Route } from 'react-router-dom'

import Layout from './components/Layout'
import Home from './pages/Home'
import NoMatch from './pages/NoMatch'

const Root () => (
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="*" element={<NoMatch />} />
    </Route>
  </Routes>
)

export default Root

Создадим недостающие компоненты

> mkdir -p src/pages/{Home,NoMatch} src/components/Layout
> touch src/pages/Home/index.js src/pages/NoMatch/index.js
> touch src/components/Layout/index.js

Страницы приложения я поместил в папку /pages. Подобным образом сделано в NextJS и мне кажется это хорошей практикой.

// src/components/Layout/index.js
import { Outlet } from 'react-router-dom'

import Theme from '../Theme'

const Layout = () => (
  <>
    <Theme />
    <main>
      <Outlet />
    </main>
  </>
)

export default Layout

// src/pages/Home/index.js
const Home = () => <h1>Home</h1>

export default Home

// src/pages/NoMatch/index.js
import { Link } from 'react-router-dom'

const NoMatch = () => (
  <>
    <h1>Page Not Found</h1>
    <h2>We could not find what you were looking for.</h2>
    <p>
      <Link to="/">Go to the home page</Link>
    </p>
  </>
)

export default NoMatch

И теперь мы по умолчанию находимся на странице Home, а если перейдем на любую другую, то нам откроется страница NoMatch

Заключение

С помощью redux-toolkit добавление тёмной темы выглядит еще проще. К тому же, если вы всё равно собираетесь его использовать на своем проекте, то этот подход будет предпочтительней контекста. Делитесь в комментариях мыслями о том, как можно улучшить этот код или задавайте вопросы, если что-то осталось не ясно - с удовольствием всем отвечу!