使用 PubSub

将 Publish 和订阅添加到 React 应用程序的响应钩 .

这个 usePubSub 钩子为您的 React 组件提供了访问当前 PubSubContext打开 你可以做到这一点 publish 给频道留言,以及 subscribe 到频道接收消息.

你提供 PubSubContext 使用 <PubSubProvider> 在应用程序的根层(或任何地方).

您也可以明确创建 PubSubContext 使用 createPubSubContext() 并提供给: <PubSubProvider context={myContext}>,然后使用 publish, (中文(简体) ), subscribe 财务报告和审定财务报表 unsubscribe 工作方法 PubSubContext 你申请的任何地方.

安装

npm install --save @cactuslab/usepubsub

使用量

import * as React from 'react'

import { usePubSub, PubSubProvider } from '@cactuslab/usepubsub'

/* Add a top-level PubSubProvider to your app to initialise the PubSub context */
const App = () => {
   return (
    <PubSubProvider>
      ...
    </PubSubProvider>
  )
}

const ExampleSubscriber = () => {
  const { subscribe } = usePubSub()
  React.useEffect(function() {
    return subscribe('CHANNEL', function(message) {
      ...
    })
  })
}

const ExamplePublisher = () => {
  const { publish } = usePubSub()
  
  function sendMessage() {
    publish('CHANNEL', nextMessage)
  }
}

提供自定义上下文

使用 createPubSubContext() 创建 PubSubContext,然后调用 publish, (中文(简体) ), subscribe 财务报告和审定财务报表 unsubscribe 在你的申请的任何地方.

import { createPubSubContext, PubSubProvider } from '@cactuslab/usepubsub'

const myContext = createPubSubContext()

myContext.subscribe('ALERT_CHANNEL', function(message) {
  alert(message)
})

const App = () => {
  return (
    <PubSubProvider context={myContext}>
      ...
    </PubSubProvider>
  )
}

API 参考

type Handler = (message: unknown) => void

interface PubSubContext {
  publish: (channel: string, message: unknown) => void
  subscribe: (channel: string, handler: Handler) => () => void
  unsubscribe: (channel: string, handler: Handler) => void
}

/* Functions */
function createPubSubContext(): PubSubContext

/* Hooks */
function usePubSub(): PubSubContext

/* Components */
<PubSubProvider />
<PubSubProvider context={PubSubContext} />

许可证

麻省理工学院 仙人掌

此钩是使用 创建- 反应- hook。 。 。 .