React不知道Redux-Form状态更改

Question

Our app has a page for administrators to make Quotes for our clients.

A Quote consists of one or more "jobs". Eg If a quote is for installing a fridge, and doing yard work the Quote would consist of the following two jobs:

• Fridge Installation -$xx
• Yard Work - $yy

There is other metadata associated with a job that warrants a whole other form for creating / editing a single job.

Hence the page for creating / editing a single quote consists of two forms:

1. Quote form for handling the currency of the quote, the title of the quote, toggling of jobs, and deleting of jobs
2. Job form (in the shape of a Modal) for handling the title of the job, description of the job and a list of items that break down the work to be done for that job

I have a top-level container component that renders the following 2 Redux-Form components:

    {/* IN CONTAINER COMPONENT */}
    <JobModalForm
      onSubmit={this.saveJob}
    />
    <QuoteForm
      initialValues={quote}
      onSubmit={this.updateQuote}
      updateQuote={this.updateQuote}
      deleteQuote={this.deleteQuote}
      publicQuoteUrl={this.props.publicQuoteUrl}
      linkCopied={() => { this.props.snackbarString('link copied!') }}
    />

Both of these forms are stored in separate parts of the form state:

--form |
       | -- quote
       |
       | -- job

However, these two forms have to communicate with each other.

All is working except for one thing:

When I update a job (whether pre-existing using initialValues or newly-added) for the first time, the update works: If I change the price on a job, the QuoteForm will render the new price. This is done through reduxForm's arraySplice

  // in container component ...
  // onSubmit handler for JobModalForm
  saveJob = (job, dispatch, props) => {

      // if this is an existing job (whether or not it has been created in the db or not)
      // update it
      // else 
      // append the job to the existing quote
      if (job._id || job.fresh) {
         const action = arraySplice('quote', 'jobs', job.index, 1, job)
         dispatch(action)
      } else {
         dispatch(arrayPush('quote', 'jobs', job ))
      }

      dispatch({ type: JobModalActions.TOGGLE_MODAL })
}

However, subsequent updates to ANY existing Fields within QuoteForm's ArrayField do not trigger a render from React. Eg changing the price on any job after my initial update does not get noticed by React.

Redux-Form successfully dispatches an action and the store's form key does contain the updated fields .

Curiously enough, creating any number of jobs does work (by way of arrayPush as seen above).

I'm totally stumped and need some help on figuring out why form submissions for JobModalForm only work for new jobs.

---

Appendix

Here is an example replicating the issue: https://www.webpackbin.com/bins/-KgoQMIyvxdJb7Pvh0eu

Code snippets

Versions of packages:

"react-redux": "^4.4.1",
"redux": "^3.3.1",
"redux-form": "^6.5.0",
"redux-form-material-ui": "^4.1.2",

JobModalForm

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
  form: 'job',
  enableReinitialize: true
})(JobModal))

QuoteForm

export default connect(null, mapDispatchToProps)(reduxForm({
  form: 'quote'
})(QuoteForm))

Answer 1

I realized this is a shallow comparison issue within Redux-Form - not my source.

Here is the issue. As you can see, Field Array does shallow comparison without allowing the user to allow for deep comparison.

There's actually a PR within the repo ( link ) that resolves this very issue.