Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redux-form v6 isDirty (and isPristine) selector not triggering re-render on state change

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.

like image 503
Jon Wyatt Avatar asked Mar 09 '23 06:03

Jon Wyatt


1 Answers

Doh! Not a bug. I was importing the wrong, mutable isDirty selector..

import { isDirty } from 'redux-form/immutable'

..solved the problem

like image 191
Jon Wyatt Avatar answered Apr 28 '23 16:04

Jon Wyatt