Как отправить данные из дочернего компонента в родительский компонент в react с помощью rxjs?

Если вы читали мой прошлый пост, (если нет, то я настоятельно рекомендую прочитать его, чтобы понять, о чем я говорю), то вы, вероятно, знаете, как отправить данные из дочернего компонента в родительский компонент, но в этот раз я покажу вам, как сделать это другим способом, используя фантастическую библиотеку под названием rxjs, вы можете прочитать больше из документации о том, что это за библиотека, и узнать, как ее использовать.

В сегодняшнем посте я покажу вам, как использовать немного этой библиотеки для достижения нашей цели.

Во-первых, давайте проясним, эта библиотека использует реактивное программирование, если вы не знаете, что это такое, то вкратце скажу, что реактивное программирование — это сочетание лучших идей паттерна наблюдателя, паттерна итератора и функционального программирования.

Итак, давайте определим нашу проблему.
Нам нужна кнопка, на которой мы показываем количество кликов, которые делает пользователь, но в родительском компоненте мы также должны отображать количество кликов. Это выглядит примерно так:

Как мы можем это сделать?
Давайте напишем код, чтобы выяснить это.

Детский компонент

import { useEffect, useState } from "react";
import { Subject } from "rxjs";

// we create and export the observable;
// note the $ character at the end;
// this is the convention for observable variables
export const countObserver$ = new Subject();
export default function CustomButton({
  className,
  action = () => {},
  children,
}) {
  const [count, setCount] = useState(0); 

  useEffect(() => {
    // send [count] in our observable
    countObserver$.next(count); 
  }, [count]);// check all the changes of [count]

  return (
    <button
      className={`button ${className}`}
      onClick={() => {
        setCount(count += 1); // we count the clicks
        action();
      }}
    >
      {children} clicks: {count}
    </button>
  );
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Родительский компонент

import { useEffect, useState } from "react";
import CustomButton, { countObserver$ } from "../components/customButton";

export default function Example() {
  // we create the same variable as the children component
  const [count, setCount] = useState(0);

  useEffect(() => {
    // subscribe the observable, this function returns 
    // the count that is changing in the child component
    countObserver$.subscribe(setCount);
  }, []);

  const onClick = () => {
    console.log("do some action");
  };

  return (
    <div className="is-flex is-flex-direction-column is-align-self-flex-end">
      <CustomButton action={onClick} className="is-success mb-3">
        Button
      </CustomButton>
      <label className="label">Clicks: {count}</label>
    </div>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

И в итоге мы получим нечто подобное:

Заключение

С помощью этого подхода мы можем увидеть немного того, что rxjs может сделать, если вы хотите узнать больше об этой библиотеке, дайте мне знать, и я напишу больше о ней, с различными примерами.
Есть бесконечные возможности того, что мы можем сделать, например, если вам нужно переменную count умножить на 10, это так же просто, как запрограммировать pipe с функцией map внутри нее и умножить данные.

countObserver$.pipe(map((data) => data * 10)).subscribe(setCount);
Вход в полноэкранный режим Выход из полноэкранного режима

Большое спасибо за прочтение и не стесняйтесь обращаться ко мне, если вам что-то понадобится.

Оцените статью
devanswers.ru
Добавить комментарий