反応における出版者の加入者パターンjs

先週、私はPublisher Subscription(Pub Sub)パターンと呼ばれるパターンを学んで、反応でそれを実行しようとしました.これは簡単にReactionのコンテキストAPIやreduxのようなサードパーティ製のライブラリで行うことができますが、私は別のアプローチを取った.

tl;dr: NOTE: This code is not production ready. Complete working app can be found here

パブ/サブパターンは何ですか？

ウィキペディアによると

Pub-Sub is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published messages into classes without knowledge of which subscribers, if any, there may be. Similarly, subscribers express interest in one or more classes and only receive messages that are of interest, without knowledge of which publishers, if any, there are.

簡単な言葉では、出版者と購読者はお互いに気づかない.それらの間のすべてのコミュニケーションは、出版者から発されるイベントを通してとられて、加入者に通知します.示すように
Pubsubパターン源msd blog

これを反応させる

私はパブのサブパターンを使用して、最も簡素化された方法で私は2つのイベントだけで行うことができます反応してください.
この例では、加入者として機能する簡単なモーダルを作成します.始めましょう

export const Modal = () => {
  const [content, setContent] = useState("no content");
  const [showModal, setShowModal] = useState(false);

  const setMessage = (message) => {
    setContent(message);
    setShowModal(true);
  };
  const clearMessage = () => {
    setContent("");
    setShowModal(false);
  };

  if (showModal) {
    return (
      <div>
        <h2>{content}</h2>
        <button onClick={clearMessage}>Close Modal </button>
      </div>
    );
  }
  return null;
};

それから、私はイベントメッセージバスを必要とします.はい、

const event = {
  list: new Map(),
  on(eventType, eventAction) {
    this.list.has(eventType) || this.list.set(eventType, []);
    if (this.list.get(eventType)) this.list.get(eventType).push(eventAction);
    return this;
  },

  emit(eventType, ...args) {
    this.list.get(eventType) &&
      this.list.get(eventType).forEach((cb) => {
        cb(...args);
      });
  }
};

ここでは、イベントのアクションonとemitあなたが他のイベントシステムを追加することができます他のイベントシステムは、clear、offなどの他のイベントシステムです.
一旦我々の場所に我々のイベントシステムがあるならば

export const Modal = () => {
  const [content, setContent] = useState("no content");
  const [showModal, setShowModal] = useState(false);

  const setMessage = (message) => {
    setContent(message);
    setShowModal(true);
  };
  const clearMessage = () => {
    setContent("");
    setShowModal(false);
  };

  useEffect(() => {
    event.on("showModal", setMessage).on("clearAllMessage", clearMessage);
  }, []);
  if (showModal) {
    return (
      <Container>
        <h2>{content}</h2>
        <button onClick={clearMessage}>Close Modal </button>
      </Container>
    );
  }
  return null;

次に、我々はイベントを放出する出版社である最終的なPICEを必要とするパズルを完了するために

export const ModalPublisher = {
  message: (content) => {
    event.emit("showModal", content);
  },
  clearAllMessage: () => {
    event.emit("clearAllMessage");
  }
};

さて、すべてがあなたが現在できる場所にあるならば、我々は現在App.js

function App() {
  return (
    <div className="App">
      <Modal showModal={true} />
      <h1
        onClick={() => {
          ModalPublisher.message("this is the content from App");
        }}
      >
        Hello CodeSandbox
      </h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

結論

このコードはまだまだ準備ができていません.私はモーダルとトーストのためにこのパターンを使用しました.

コメント?

このパターンのように使いますか?

このパターンは何を使用することができますか?