Почему redux state не запоминает изменение?

Пытаюсь реализовать логику смены темы на сайте, создал state в redux по клику на переключатель меняю state и в зависимости какое значение в state отрисовываю определенные цвета. Всё хорошо меняется но при переходе на другой страницу приложения state возвращается в начальное состояние, почему так? Почему state не запоминает изменение я ведь не перезагрузил приложение я перешёл на одну из вкладок?

Компонент:

import React from "react";
import logo from "../../img/image.png";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars, faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
import { useSelector, useDispatch } from "react-redux";
import { changeThemeAC } from "../../redux/action/changeThemeAC";
import "./style.css";

function Navbar() {
  const dispatch = useDispatch();
  const theme = useSelector((state) => state.theme);
  console.log(theme);

  const handleTheme = () => {
    dispatch(changeThemeAC(!theme));
  };

  return (
    <>
      <nav className="navbar navbar-expand-lg navbar-custom">
        <div className="container">
          <a className="navbar-brand" href="/">
            <img className="logo" src={logo} alt="logo" />
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
          </button>

          <div
            className="collapse navbar-collapse div-categories"
            id="navbarSupportedContent"
          >
            <ul className="navbar-nav ml-auto">
              <li>
                <a className="nav-link" href="/">
                  Главная <span className="sr-only">(current)</span>
                </a>
              </li>
              <li>
                <a className="nav-link" href="/aboutme">
                  Обо мне
                </a>
              </li>
              <li>
                <a className="nav-link" href="/skills">
                  Технологии
                </a>
              </li>
              <li>
                <a className="nav-link" href="/contact">
                  Контакты
                </a>
              </li>
              <li className="liCheckbox">
                <div>
                  <input type="checkbox" class="checkbox" id="chk" />
                  <label
                    class="label"
                    for="chk"
                    onClick={() => {
                      handleTheme();
                    }}
                  >
                    <FontAwesomeIcon
                      icon={faSun}
                      style={{
                        color: "#fff",
                        marginRight: "3px",
                        width: "10px",
                      }}
                    />
                    <FontAwesomeIcon
                      icon={faMoon}
                      style={{ color: "#fff", width: "10px" }}
                    />
                    <div class="ball"></div>
                  </label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );
}

export default Navbar;

Action:

export function changeThemeAC(type) {
  return {
    type,
  };
}

Reducer:

function changeTheme(state, action) {
  switch (action.type) {
    case true:
      return { ...state, theme: true };
    case false:
      return { ...state, theme: false };
    default:
      return state;
  }
}

export default changeTheme;