Making the ColorPicker Dialog Reusable
We'll cover the following...
Using the Dialog Result Value
Unfortunately, now we have a problem. We can forward the current color value to the ColorPickerDialog as part of the “description” that we’re storing in state, and use that as the initial color value in the dialog. However, we need some way to not only retrieve the final color value when the user clicks the “Select” button, but also actually use it to update the right field in the unit info reducer.
The obvious solution is to simply pass a callback function as another prop to the dialog, but that means we’d be storing the callback function in the Redux store. Per the Redux FAQ, putting non-serializable values in the store should be avoided. Now, at the technical level, doing this would work, but it would likely cause issues with time-travel debugging. It’s also not the “right” way to do things with Redux. So, what can we do instead?
Earlier, I linked a previous post I’d written on handling return values from generic “picker” modals. The basic idea is to have the code that requested the modal also include a pre-built action object as a prop for the dialog. When the dialog succeeds, it dispatches that pre-built action, with its “return value” attached. It is a level of indirection, but it allows us to continue following the Redux principles.
Commit 9b2b7ef: Allow ColorPicker to dispatch pre-built actions after selection
...