Блог

Я всего пару дней изучаю Redux, и это кажется довольно простым. Однако есть одна вещь, которая у меня не работает, и я не знаю, почему:

Позвольте мне привести вам пример с элементом switch, который переключает тему, и кнопками, которые являются слушателями темы.

Мой коммутатор отправляет тему rducer и, когда я получаю состояние() внутри элемента коммутатора: он работает без проблем.

Но я хочу прослушать изменения темы и соответствующим образом изменить цвета кнопок. Итак, я подписываюсь на каждую кнопку в магазине и пытаюсь получить статус(). Однако он никогда не срабатывает. console.log() никогда не запускается, ничего не работает. Почему? Я был бы признателен за любые подробности.

Заранее благодарю вас! Код ниже: Кнопки, которые не работают (данные кнопок находятся в

     import { createStore } from "redux";
import { RootReducer } from "src/scripts/Redux/CommonReducer";
import { MEMBERS_BAR_BUTTONS } from "./Buttons";
import styles from "./MembersBar.module.css";
import { changeButtonsStyle } from "./MembersBarActions";

const store = createStore(RootReducer);

export default class MembersBar {
  root: HTMLElement;
  constructor(root: HTMLElement) {
    this.root = root;
    this.render();
  }

  renderButtons(container: HTMLDivElement) {
    MEMBERS_BAR_BUTTONS.forEach((button) => {
      const btn = document.createElement("button");
      btn.className = button.class;
      btn.textContent = button.defaultLabel;
      const theme = store.getState().theme;
      changeButtonsStyle(theme, btn, button.id);
      this.manageButtonStyle(btn, button.id);
      container.append(btn);
    });
  }

  manageButtonStyle(button: HTMLButtonElement, id: string) {
    store.subscribe(() => {
      console.log("something changed!");
      const newTheme: string = store.getState().theme;
      changeButtonsStyle(newTheme, button, id);
    });
  }

  render() {
    const div = document.createElement("div");
    div.className = styles["members-bar-wrapper"];
    this.renderButtons(div);
    this.root.append(div);
  }
}
 

Код переключения темы, который работает:

 import styles from "./ThemeSwitch.module.css";
import { RootReducer } from "src/scripts/Redux/CommonReducer";
import { createStore } from "redux";
import { setTheme } from "src/scripts/Redux/Actions";
import { changeStyle } from "./ThemeSwitchActions";

const store = createStore(RootReducer);
const body = document.querySelector("body");


export default class ThemeSwitch {
    root: HTMLElement;
    constructor(root: HTMLElement) {
        this.root = root;
        this.render()
    }
    renderSwitch (parent: HTMLDivElement) {
        const div = document.createElement("div");
        div.className = styles["theme-switch-element"];
        const span = document.createElement("span");
        span.className = styles["span"];
        this.renderTheme(span)
        div.addEventListener("click", () => {
            this.changeTheme()
        });
        div.append(span);
        parent.append(div);
    }
    renderTheme (span: HTMLSpanElement) {
        store.subscribe(() => {
            const currentTheme = store.getState().theme;
            changeStyle(currentTheme, body, span)
        })
    }
    changeTheme () {
        const theme = store.getState().theme;
        const newTheme = (theme === "dark" ? "light" : "dark");
        store.dispatch(setTheme(newTheme));
    }
    render () {
        const div = document.createElement("div");
        div.className = styles["theme-switch-wrapper"];
        this.renderSwitch(div);
        this.root.append(div);
        this.changeTheme()
    }
}
 

Проблема заключалась в том, что я создавал новое хранилище в каждом компоненте.