0.3.2 • Published 1 year ago
ink-emitter v0.3.2
ink-emitter
InkEmitter 可用于处理组件间的相互通信,不局限于框架。
安装
npm install ink-emitter
pnpm install ink-emitter
使用
引入 InkEmitter
项目中引入 ink-emitter
import { inkEmitter } from 'ink-emitter';
发送数据
inkEmitter.emit('event_name', payload);
接收数据
receive
方法接收事件
const unsubscribe = inkEmitter.receive('event_name', (payload) => {
// 处理接收到的数据
});
// 取消订阅
unsubscribe();
receive
方法接收多个事件
const unsubscribe = inkEmitter.receive(['event1', 'event2'], (payload) => {
// 处理接收到的数据
});
// 取消订阅
unsubscribe();
取消订阅
unsubscribes
方法接收事件
inkEmitter.unsubscribes('event_name')
unsubscribes
方法接收多个事件
inkEmitter.unsubscribes(['event1', 'event2'])
clear
方法清除所有事件
inkEmitter.clear()
API
emit(event: EventNameOrArray, ...args: any[]): void
发送一个带有指定名称或者包含多个名称的数组和负载的事件。
receive<T extends any[] = any[]> (event: EventNameOrArray, listener: EventCallback): () => void
接收一个或多个事件。当事件被发送时,提供的监听器函数将被调用并接收事件的负载。此方法返回一个取消订阅的函数。
unsubscribes (event: EventNameOrArray)
接收一个接收一个或多个事件,取消事件订阅。
clear()
取消所有订阅事件。
Example
React Component
const OneToTwoA = 'OneToTwoA'
const OneToTwoB = 'OneToTwoB'
type Message = {
message: string
}
type MessageA = {
title: string
message: string
}
type UserInfo = {
username: string
}
type AllMessage = Message | MessageA
const TestOne = function () {
const handleClick = useCallback(() => {
inkEmitter.emit(OneToTwoA, {
message: 'TestOne' + Math.random().toFixed(2)
})
inkEmitter.emit(OneToTwoB, {
title: 'TestTwo-Title' + Math.random().toFixed(2),
message: 'TestTwo' + Math.random().toFixed(2)
})
}, [])
return (
<div>
TestOne Com:
<button onClick={handleClick}>click me</button>
</div>
)
}
function isMessageA (obj: Message | MessageA): obj is MessageA {
return 'title' in obj
}
const TestTwo = function () {
const [title, setTitle] = useState<any>('')
useEffect(() => {
inkEmitter.receive<[AllMessage, UserInfo]>(
[OneToTwoA, OneToTwoB],
(data, user) => {
if (isMessageA(data)) {
console.log('Title:', data.title)
setTitle(() => data.title)
}
console.log('Message:', data.message)
}
)
}, [])
return (
<div>
TestTwo Com:
<span> {title ? title : 'emit empty'} </span>
</div>
)
}