Fix the issue where some dialogs cannot be closed when using nested providers

[IVLIU]

relate issues

• 100

• 141

feature

1. optimize parts of the TypeScript implementation.
2. the issue of being unable to close the popup when using nested providers.

sample

Please refer to the following example. You can switch the imports to see the effects before and after the fix.

https://codesandbox.io/p/sandbox/nice-modal-sample-l4hj7d?file=%2Fsrc%2FApp.tsx%3A50%2C64

and

I tried to maintain compatibility as much as possible, so I added extra parameters to the show, hide, and remove methods to support dispatch definition.

[IVLIU]

@supnate Please review this PR if you have time.

[HiChen404]

Great ! solved my problem.

[rm86626]

谢谢，我在开发中也遇到了同样的问题，已解决

[IVLIU]

Additionally, if you prefer not to use useModal, that's also an option.

import { show, DispatchContext } from '@ebay/nice-modal-react'

const dispatch = useContext(DispatchContext)
show(Dialog, { name: 'hello world' }, dispatch)

or

import { show, reducer, initialState, Provider } from '@ebay/nice-modal-react'
const [modals, dispatch] = useReducer(reducer, initialState)

show(Dialog, { name: 'hello world' }, dispatch)

<Provider modals={modals} dispatch={dispatch}></Provider>

[IVLIU]

Perhaps we can provide a hook to automatically bind the dispatch.

const { show, hide, remove, Provider } = useProvider()

Of course, the naming still needs consideration.

[IVLIU]

I kept the deprecated_dispatch approach for progressive enhancement, ensuring that the previous code can still run perfectly. However, I'm not sure if deprecated is the right term.