Skip to content

Commit

Permalink
fromEvent fromQuery 无法在 subscribeDomain 正确取消 effect 中的订阅的演示
Browse files Browse the repository at this point in the history
  • Loading branch information
@undoZen
undoZen committed Apr 1, 2024
1 parent ee3029d commit c23b382
Show file tree
Hide file tree
Showing 5 changed files with 1,912 additions and 1,499 deletions.
34 changes: 26 additions & 8 deletions packages/remesh-react/__tests__/remesh-react-query.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { map, startWith, switchMap, take, tap } from 'rxjs/operators'

import { Remesh } from 'remesh'

import React, { useState } from 'react'
import ReactDOM, { Root } from 'react-dom/client'
import { RemeshRoot, RemeshScope, useRemeshDomain, useRemeshEvent, useRemeshQuery, useRemeshSend } from '../src'
import { delay } from './utils'
Expand Down Expand Up @@ -78,7 +79,7 @@ const PageDomain = Remesh.domain({

const COUNTDOWN_SECONDS = 5

jest.setTimeout(10 * 1000)
jest.setTimeout(15 * 1000)
describe('remesh-react-event', () => {
let container!: HTMLDivElement
let root!: Root
Expand All @@ -103,7 +104,7 @@ describe('remesh-react-event', () => {

const AdditionalDomain = Remesh.domain({
name: 'AdditionalDomain',
impl(domain) {
impl(domain, id: number) {
const sendCodeDomain = domain.getDomain(SendCodeDomain())

const SendCodeCommand = domain.command({
Expand Down Expand Up @@ -187,9 +188,10 @@ describe('remesh-react-event', () => {
},
})

function Additional() {
function Additional({ id }: { id: number }) {
console.log('get prop id:', id)
const send = useRemeshSend()
const domain = useRemeshDomain(AdditionalDomain())
const domain = useRemeshDomain(AdditionalDomain(id))

useRemeshEvent(domain.event.SendCodeSuccessEvent, () => {
useRemeshEventFn()
Expand Down Expand Up @@ -217,6 +219,7 @@ describe('remesh-react-event', () => {
const send = useRemeshSend()
const domain = useRemeshDomain(PageDomain())
const { step } = useRemeshQuery(domain.query.PageQuery())
const [id, setId] = useState(0)

return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
Expand All @@ -232,14 +235,15 @@ describe('remesh-react-event', () => {
<div
id={'conflict'}
onClick={() => {
setId((id) => id + 1)
send(domain.command.CreateCommand())
}}
>
Expand
</div>
)}

{step === 'additional' && <Additional />}
{step === 'additional' && <Additional id={id} />}
</div>
)
}
Expand All @@ -248,7 +252,7 @@ describe('remesh-react-event', () => {
await act(() => {
root.render(
<RemeshRoot store={store}>
<RemeshScope domains={[AdditionalDomain(), SendCodeDomain()]}>
<RemeshScope domains={[AdditionalDomain(1), SendCodeDomain()]}>
<Page />
</RemeshScope>
</RemeshRoot>,
Expand Down Expand Up @@ -301,7 +305,21 @@ describe('remesh-react-event', () => {
sendCode.dispatchEvent(new MouseEvent('click', { bubbles: true }))
})

expect(triggerEffectFn).toBeCalledTimes(2)
expect(useRemeshEventFn).toBeCalledTimes(2)
await delay(200)
expect(triggerEffectFn).toBeCalledTimes(3)
expect(useRemeshEventFn).toBeCalledTimes(3)

await delay(2600)
expect(queryEffectFn).toBeCalledTimes(9)
expect(eventEffectFn).toBeCalledTimes(9)

await act(() => {
const backButton = document.getElementById('back') as HTMLButtonElement
backButton.dispatchEvent(new MouseEvent('click', { bubbles: true }))
})

await delay(2600)
expect(queryEffectFn).toBeCalledTimes(9)
expect(eventEffectFn).toBeCalledTimes(9)
})
})
26 changes: 19 additions & 7 deletions packages/remesh/src/store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,8 +303,10 @@ export const RemeshStore = (options?: RemeshStoreOptions) => {
const observable = new Observable<U>((subscriber) => {
const subscription = observableMapToImplIfNeeded.subscribe(subscriber)
eventStorage.refCount += 1
console.log(eventStorage.id, ' eventStorage.refCount += 1 ', eventStorage.refCount)
return () => {
eventStorage.refCount -= 1
console.log(eventStorage.id, ' eventStorage.refCount -= 1 ', eventStorage.refCount)
subscription.unsubscribe()
if (eventStorage.refCount === 0) {
clearEventStorageIfNeeded(eventStorage)
Expand Down Expand Up @@ -458,16 +460,19 @@ export const RemeshStore = (options?: RemeshStoreOptions) => {

const getQueryStorageObservable = <T extends Args<Serializable>, U>(
queryAction: RemeshQueryAction<T, U>,
type: number = 0,
): Observable<U> => {
const queryStorage = getQueryStorage(queryAction)

return new Observable<U>((subscriber) => {
const subscription = queryStorage.subject.subscribe(subscriber)
queryStorage.refCount += 1
console.log(' queryStorage.refCount += 1 ', queryStorage.key, type)

return () => {
queryStorage.refCount -= 1
subscription.unsubscribe()
console.log(' queryStorage.refCount -= 1 ', queryStorage.key, type)
if (queryStorage.refCount === 0) {
clearQueryStorageIfNeeded(queryStorage)
}
Expand Down Expand Up @@ -753,6 +758,8 @@ export const RemeshStore = (options?: RemeshStoreOptions) => {
const shouldClearDomainStorage = <T extends RemeshDomainDefinition, U extends Args<Serializable>>(
domainStorage: RemeshDomainStorage<T, U>,
): boolean => {
console.log('shouldClearDomainStorage', domainStorage.key)
console.log('refCount', domainStorage.refCount)
if (domainStorage.refCount > 0) {
return false
}
Expand All @@ -761,6 +768,7 @@ export const RemeshStore = (options?: RemeshStoreOptions) => {
return false
}

console.log('downstreamSet.size', domainStorage.downstreamSet.size)
if (domainStorage.downstreamSet.size !== 0) {
return false
}
Expand All @@ -770,25 +778,29 @@ export const RemeshStore = (options?: RemeshStoreOptions) => {
* when their refCount is 0, it means there is no consumers outside of the domain
* so the domain resources can be cleared
*/
for (const queryStorage of domainStorage.queryMap.values()) {
if (queryStorage.refCount > 0) {
return false
}
}

console.log('eventMap.size', domainStorage.eventMap.size)
for (const eventStorage of domainStorage.eventMap.values()) {
if (eventStorage.refCount > 0) {
return false
}
}
console.log('queryMap.size', domainStorage.queryMap.size)
for (const queryStorage of domainStorage.queryMap.values()) {
if (queryStorage.refCount > 0) {
return false
}
}

return true
}

const clearDomainStorageIfNeeded = <T extends RemeshDomainDefinition, U extends Args<Serializable>>(
domainStorage: RemeshDomainStorage<T, U>,
) => {
console.log('clearDomainStorageIfNeeded', domainStorage.key)
if (shouldClearDomainStorage(domainStorage)) {
console.log('clearDomainStorage', domainStorage.key)
clearDomainStorage(domainStorage)
}
}
Expand Down Expand Up @@ -838,7 +850,7 @@ export const RemeshStore = (options?: RemeshStoreOptions) => {
throw new Error(`Unexpected input in fromEvent(..): ${Event}`)
},
fromQuery: (queryAction) => {
return getQueryStorageObservable(queryAction)
return getQueryStorageObservable(queryAction, 1)
},
}

Expand Down Expand Up @@ -1161,7 +1173,7 @@ export const RemeshStore = (options?: RemeshStoreOptions) => {
queryAction: RemeshQueryAction<T, U>,
subscriber: ((data: U) => unknown) | Partial<Observer<U>>,
): Subscription => {
const observable = getQueryStorageObservable(queryAction)
const observable = getQueryStorageObservable(queryAction, 2)
if (typeof subscriber === 'function') {
return observable.subscribe(subscriber)
}
Expand Down
Loading

0 comments on commit c23b382

Please sign in to comment.