title: ReduxForm: using formValueSelector within a FieldArray for conditional fields doesn't render immediately
body: <p>This <em>sort of</em> works, except additional block doesn't show up when I make a service_type radio selection, it only pops up/re-renders if I complete an additional action, like adding or removing a service block or changing another field.</p>
  
  <pre><code>    import './Register.scss';
      import React, { Component, PropTypes } from 'react';
      import { connect } from 'react-redux';
      import { Field, reduxForm, FieldArray, formValueSelector } from 'redux-form';
      import MenuItem from 'material-ui/MenuItem';
      import { RadioButton } from 'material-ui/RadioButton'
      import {
        TextField,
        SelectField,
        TimePicker,
        RadioButtonGroup
      } from 'redux-form-material-ui';
      import validate from './validate';
  
      class OnboardPageThree extends Component {
        static propTypes = {
          handleSubmit: PropTypes.func.isRequired,
          previousPage: PropTypes.func.isRequired
        }
  
        constructor(props, context) {
              super(props, context);
          }
  
        renderGroups = ({ fields, meta: { touched, error } }) =&gt; {
          return (
            &lt;div&gt;
              {fields.map((service, index) =&gt;
                &lt;div className="service-type-group" key={index}&gt;
                  &lt;h4&gt;{index} Service&lt;/h4&gt;
                  &lt;button
                    type="button"
                    className="remove-button"
                    onClick={() =&gt; fields.remove(index)}&gt;Remove
                  &lt;/button&gt;
                  &lt;div className="field-group half"&gt;
                    &lt;Field
                      name={`${service}.service_type`}
                      component={RadioButtonGroup}
                      floatingLabelText="Service type"
                      className="textfield"&gt;
                      &lt;RadioButton value="first_come_first_serve" label="First-come first-served"/&gt;
                      &lt;RadioButton value="appointments" label="Appointment"/&gt;
                    &lt;/Field&gt;
                  &lt;/div&gt;
                  {/* Sort of works except doesn't populate until forced re-render by adding another to array or updating a previous field */}
                  {typeof this.props.services[index].service_type != undefined &amp;&amp; this.props.services[index].service_type == "first_come_first_serve" ? &lt;div className="fieldset"&gt;
                    &lt;p className="label"&gt;Timeslot capacity and length when creating a first-come-first-served (line-based) service blocks&lt;/p&gt;
                    &lt;div className="field-group sentence-inline"&gt;
                      &lt;Field
                        name={`${service}.max_people`}
                        type="number"
                        component={TextField}
                        label="Number of people per timeslot"
                        className="textfield"
                      /&gt;
                      &lt;p&gt;people are allowed every&lt;/p&gt;
                      &lt;Field
                        name={`${service}.time_interval`}
                        component={SelectField}
                        className="textfield"&gt;
                        &lt;MenuItem value="5" primaryText="5 minutes" /&gt;
                        &lt;MenuItem value="10" primaryText="10 minutes" /&gt;
                        &lt;MenuItem value="15" primaryText="15 minutes" /&gt;
                        &lt;MenuItem value="30" primaryText="30 minutes" /&gt;
                        &lt;MenuItem value="60" primaryText="60 minutes" /&gt;
                        &lt;MenuItem value="all_day" primaryText="All day" /&gt;
                      &lt;/Field&gt;
                      &lt;p&gt;.&lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt; : null}
                &lt;/div&gt;
              )}
              &lt;button
                type="button"
                className="action-button"
                onClick={() =&gt; fields.push({})}&gt;Add Service
              &lt;/button&gt;
              {touched &amp;&amp; error &amp;&amp; &lt;span className="error-message"&gt;{error}&lt;/span&gt;}
            &lt;/div&gt;
          );
        }
  
        render() {
          const { handleSubmit, previousPage } = this.props;
  
          return (
            &lt;form onSubmit={handleSubmit}&gt;
              &lt;h2&gt;When do you provide service?&lt;/h2&gt;
              &lt;FieldArray name="service_options" component={this.renderGroups} /&gt;
              &lt;div className="justify-flex-wrapper service-actions"&gt;
                &lt;button type="button" className="back-button" onClick={previousPage}&gt;Back&lt;/button&gt;
                &lt;button type="submit" className="action-button"&gt;Next&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          );
        }
      }
  
      OnboardPageThree = reduxForm({
        form: 'onboarding',
        destroyOnUnmount: false,
        validate
      })(OnboardPageThree)
  
      const selector = formValueSelector('onboarding');
      OnboardPageThree = connect(
        (state) =&gt; {
          const services = selector(state, 'service_options');
          return {
            services
          };
        }
      )(OnboardPageThree);
  
      export default OnboardPageThree;
  </code></pre>