1

I have a react app that is using a redux store and this component also uses redux-form. I am seeing a strange behavior on one particular type of update where I want to trigger a follow-on update.

Basically a user is updating permissions for something on the form, then saves. The save submits the form and in the processing of the action, it triggers another action (getting a list of all the somethings). When the list is returned from the server, this dispatches an action to update the list UI. At this point I am updating a property in the redux store for the form to say trigger an update of the permissions for the currently editing thing. This is the only point where I can do this because we now have the information to trigger this request.

The problem is that a boolean flag is being set as the trigger, and the mapStateToProps is getting called with the updated flag, but the component is not subsequently getting called (shouldComponentUpdate and componentWillUpdate never get called). It is like it ignores the state of the boolean variable in the props.

I found that if, in mapStateToProps I set another property based on the boolean trigger, then the component is updated (re-rendered).

function mapStateToProps(store, ownProps) {

  ...

  let triggerFetchSomethingOwnershipHash = 0;
  if (store.triggerFetchSomethingOwnership) {
    triggerFetchSomethingOwnershipHash = 100000 * Math.random();
  }

  return {
    ...
    triggerFetchSomethingOwnership,
    triggerFetchSomethingOwnershipHash 
  }
}

...
const ConnectedSomethingDetail = connect(mapStateToProps)(SomethingForm);
export default ConnectedSomethingDetail;

Why do I need to do this and how can I avoid it?

Yes I have checked a few relevant SO questions like react-redux-component-does-not-rerender-on-store-state-change and react-redux-update-item-in-array-doesnt-re-render

Community
  • 1
  • 1
hack_on
  • 2,532
  • 4
  • 26
  • 30
  • What part of the form are you `connect`ing? The whole form, or a `Field`? or a `FieldArray`? – Erik R. Mar 06 '17 at 19:01
  • @ErikR. I added the connect statement. It is connecting the whole form. – hack_on Mar 06 '17 at 22:03
  • @hack_on, at the bottom of your component with Redux Form I would have expected to see something like this: `export default reduxForm({ form: "someForm", validate })(SomeForm);` – Daniel May 19 '19 at 23:33

0 Answers0