React-redux-form: Update, change and submit handlers not firing on connected component

[FelixHenninger]

Hi everybody, sorry to bother you during the holidays,

I've run into some behavior that I don't quite understand, in a pattern that worked for me in previous versions of RRF. In particular, I've found that LocalForm event handlers do not fire if a superordinate component is wrapped using react-reduxes connect function.

To make this more clear, I've tried to reproduce a minimal example. The following code should run mostly by itself — I can run it using the following steps:

• run create-react-app rrf-demo (install create-react-app if needed)
• cd rrf-demo && npm install —save redux react-redux react-redux-form@latest
• replace the contents of src/index.js with the code below
• run npm start and change the contents of the form fields — there should be no output on the debug console
• comment out line 41 and uncomment line 31 — this change enables update handler notifications

I hope that you can reproduce this, and maybe give me a hint as to what I'm doing wrong. Please let me know if I can assist you in any way, or investigate things on my own — I would be more than happy to help.

Thank you very much for your ongoing effort with this great library — I'm a very happy user, and excited for all the changes that are being discussed on discord and in the issue section here!

Kind regards, -Felix

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { LocalForm, Control } from 'react-redux-form'

// Form definition -------------------------------------------------------------
// the form is copied verbatim from the documentation, with some added code
// in the change/update/submit handlers, to show whether they are working
class RawForm extends Component {
  handleChange(values) { console.log('handling change', values) }
  handleUpdate(form) { console.log('handling update', form) }
  handleSubmit(values) { console.log('handling submit', values) }
  render() {
    return (
      <LocalForm
        onUpdate={(form) => this.handleUpdate(form)}
        onChange={(values) => this.handleChange(values)}
        onSubmit={(values) => this.handleSubmit(values)}
      >
        <Control.text model=".username" />
        <Control.text model=".password" />
      </LocalForm>
    );
  }
}

// Critical distinction --------------------------------------------------------
// ... if the above component is used directly, the handlers are called
//const Form = RawForm

// ... if it is wrapped using mapStateToProps, the handlers are
// no longer executed upon updates
import { connect } from 'react-redux'

const mapStateToProps = (state, ownProps) => ({
  someProp: 'someValue'
})

const Form = connect(mapStateToProps)(RawForm)

// Boilerplate -----------------------------------------------------------------

// (dummy) state and reducer
const defaultState = {
  foo: 'bar'
}

const reducer = (state=defaultState, action) =>
  state

// store
const configureStore = (initialstate) =>
  createStore(reducer, initialstate)

// app
const App = () =>
  <Provider store={ configureStore() }>
    <Form />
  </Provider>

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

PS: I only just saw the exnextb.in template -- I'll try to rework the example, though this may take a bit because the libraries need to be updated.

[davidkpiano]

Adding here for reference - apparently this works with React-Redux v4.x but not v5.

[jinty]

I can confirm that I hit this bug with react-redux 5.0.1. Downgrading to 4.4.6 resolved it.

[davidkpiano]

@jinty Yeah, this is a current known bug with the latest react-redux - https://github.com/reactjs/react-redux/pull/589

I will find a way to work around it.

[jimbolla]

What about 5.0.2? Should be fixed. NM. It hasn't been merged in yet. Sorry.

[davidkpiano]

If you're curious (or would like to help), the main issue is that the <Connect> component in React-Redux v.5.0.x _doesn't_ completely work with taking in store={myStore} as a prop, whereas 4.x did.

[davidkpiano]

Please try this again after upgrading to React-Redux 5.0.3.

[FelixHenninger]

Hi everybody,

a huge and heartfelt thank-you for all of your effort with this, and sorry for the late reply! I had totally lost track of this, but would like to report that this issue (at least in my demo) has indeed been resolved with the latest react-redux version. I'm closing the issue for now, hoping that that is ok (please reopen otherwise).

I'm excited to get back to react-redux-form in the coming weeks, and am particularly looking forward to integrating the new debouncing feature!

All the very best, and thanks again,

-Felix