A new way of approaching modals with Redux and React

It’s a big one, modals with Redux and React. In most of our apps, we generally display 2 different kind of modals: simple modals like confirmations, notifications etc. and custom modals like a full fledged login form with validation etc.

Meet Redux Signal, hi.

For simple modals, we don’t want to create a new component just to show a message, we want to have a simple function that opens a confirmation, shows a notification or warns the user.

For custom modals, we want custom components, with full control over what’s happening.

But we also want:

  • Multiple modals at once? So we need some order / stacking order
  • Only one Overlay component
  • Serialisable Redux state, no callbacks or functions on the state, just clean stuff
  • Animations, transitions, everything super smooth

I’ve recently released a new library (which is already used in production) to help you create modals with Redux in a simple, yet flexible way. It’s called Redux Signal. It’s the result of many struggles in multiple projects where modals where a pain to setup.

Check out the demo here.

Why is it different?

It splits modals in to two categories: signals (simple modals) and modals (fully customisable, your own modals). This allows you to think different about modals in the first place.

Redux Signal internally uses an event / feedback queue technique to update the Redux state, this way you have 2 way communcation to handle events (for example -> a YES_NO signal is shown, but you want to handle an event if the user clicks on yes / no button, this is easily handled without cluttering the state with functions or callbacks)

More info and examples will be added here in the coming days, for now check out the docs at https://github.com/mikevercoelen/redux-signal

Leave a Reply

Your email address will not be published. Required fields are marked *