I am trying to detect whether the form state is dirty from a parent component so I can only display a submit button if the form values have been changed..
The initial render shows false as expected but changing the values does not trigger a re-render with the new vlaue..
import React from 'react'
import { isDirty } from 'redux-form'
import { connect } from 'react-redux'
<Parent>
{ props.isDirty ? <SubmitButton /> : null }
<Form {...etc} />
</Parent>
const mapStateToProps = state => ({
...
isDirty: isDirty('myForm')(state),
})
export default connect(mapStateToProps, null)(Parent)
Console logging props.isDirty
shows that at the initial render of <Parent/>
isDirty
is false. However, changing the values does not trigger a re-render of <Parent/>
with the new value.
Update:
After further investigation, I think this is a bug:
const mapStateToProps = (state) => {
console.log(isDirty('myForm')(state)
return {
...
isDirty: isDirty('myForm')(state),
}
Here, changing form values triggers mapStateToProps
as expected but isDirty
is always false.
Doh! Not a bug. I was importing the wrong, mutable isDirty
selector..
import { isDirty } from 'redux-form/immutable'
..solved the problem
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With