React-toastify: How does rect-toastify work?

[joetidee]

I have worked with Toast libraries before that use Redux. It is easy to envisage the ToastContainer subscribing to the store to be auto-updated with new toasts. But, I cannot see redux being used in this library, so how does it work?

[fkhadra]

Hello @joetidee,

React-toastify use a dead simple pubsub. So-called EventManager. It has 3 methods:

• on
• off
• emit

When the ToastContainer is mounted, it listens to 2 events, the callback relies on setState, there is no forceUpdate or any other evil stuff:

• SHOW: tell the container that we need to render a new toast or update an existing one.
• CLEAR: tell the container that we want to remove one or more toasts

When you call toast('hello'), under the hood eventManager.emit(SHOW, toastOptions) is called.
When you call toast.dismiss(toastId), eventManager.emit(CLEAR, toastId) is called.
And so on.

Now one may ask why not using redux?

• Redux is amazing but pulling it for that library would be over-engineered. The eventManager has only a few lines of code and has only 3 methods.
• I want to reduce dependencies as much as possible.

If you want more detailed explanations do not hesitate.

[joetidee]

Thanks for the explanation. Does EventManager set any window event listeners?

[fkhadra]

No, the EventManager use only custom event. There is only one DOM event used, it's the visibilitychange. This one is used to pause the pause when the window is not visible.