Can I safely pass this to a Redux action creator from a component defined using React.createClass?
In my code, I have created the following reducer:
const unsavedChangesProtectionReducer = handleActions({
[ENABLE_UNSAVED_CHANGES_PROTECTION]: (unsavedChangesProtection, action) => ({protected: true}),
[DISABLE_UNSAVED_CHANGES_PROTECTION]: (unsavedChangesProtection, action) => ({protected: false})},
{protected: false}
)
There is an issue when multiple components try to set/unset the global state's state.unsavedChangesProtection.protected flag. The problem occurs when unsetting this flag, as a component should not unset it if another component has already set it.
One approach is to check if the flag is already set, and if not, set it. Then store information about which component set the flag in the component's internal state. If the internal state indicates that the component set the flag, then unset it. However, this violates the DRY principle since the same logic needs to be repeated in every component.
A more general solution would be to store the identity of the last component that modified the global state within the state itself. This way, each component can check the state to determine if it was their change and appropriately unset the flag. Is it possible to implement this in React, considering each component is re-initialized when mounted/unmounted?