Update, change and submit handlers not firing on connected component #592
Description
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(installcreate-react-appif needed) cd rrf-demo && npm install —save redux react-redux react-redux-form@latest- replace the contents of
src/index.jswith the code below - run
npm startand 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.