The Material-UI package has a nice Snackbar component. This is a little like toast in Apps Script - it's a good way to show a transient message. But how to manage the appearance and disappearance of the snackbar in a React Redux environment? In the solution was pretty simple.
The idea is that you have 2 actions to dispatch. One that fires to bring up the snackbar, and another to clear the message when it's done with. In this example I want a component that i can re-use on any page.
Here's my actions
and my action creators
The reducers don't do much. They just set their part of the store to either a message, plus an open state, or a null string and a not open state. This will be used by the snackbar later to decide whether to show itself. By taking care of all this in the redux store, there's no need to manage the state in the component itself.
This is small wrapper for the Snackbar component. It's a dumb component so its expecting the handler to clear out the message once shown to be passed down to it from its parent.
It's just this
The onRequestClose handler simply has to dispatch the clear message action.
and the Toaster component is called like this
Using a decorator is the easiest way.
And that's it. As is the way of react/redux it seems like a lot of steps, but the pattern is very simple and just like all your other react/redux patterns, even though the snackbar component is kind of quirky.
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation > React, redux, redis, material-UI and firebase >