Redux form - Initial values not loading in the form

Question

Novice at this.

I have a rather long form which is used as an edit form for changing a client details. The form loads but does not load with any values. It was advised to hard code some values for fields eg "foo" and "bar" and doing this I get these strings in the text fields.

Here is my code at the end of the form for hardcoding initial values that work:

    let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

  })(Client)

        ClientForm = connect(
          state => ({
             initialValues: { account: 'foo', bsb: 'bar', }
          }),
          { reducer } // bind client loading action creator
        )(ClientForm)

  export default ClientForm

However if I use the following code nothing happens even when "state.editClient" has the values.

      let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

  })(Client)

        ClientForm = connect(
          state => ({
            initialValues: state.editClient // pull initial values from client reducer
          }),
          { reducer } // bind client loading action creator
        )(ClientForm)

  export default ClientForm

Now I import my reducer using the following import:

     import reducer from '../edit/reducer'

No errors - it finds this.

Here is the reducer:

  import { fetch, addTask } from 'domain-task'
  import { getJwt } from '../../../auth/jwt'
  import { handleErrors } from '../../../utils/http'
  import {
    REQUEST_CLIENT_TO_EDIT,
    RECEIVE_CLIENT_TO_EDIT,
    ERROR_CLIENT_EDIT,
  } from './actions'

  const initialState = {
    isLoading: false,
    isEditMode: null,
    error: null,
    id: null,
    clientNo: null,
    company: false,
    companyName: null,
    abn: null,
    isWarrantyCompany: false,
    requiresPartsPayment: false,
    companyEmail: null,
    clientFirstName: null,
    clientLastName: null,
    mobilePhone: null,
    phone: null,
    email: null,
    notes: null,
    bankName: null,
    bsb: null,
    account: null,
    activity: false,
    active: false,
    dateCreated: null,
    userName: null,
  }

  export default (state = initialState, action) => {
    switch (action.type) {
      case REQUEST_CLIENT_TO_EDIT:
        return {
          ...state,
          id: action.payload,
          isLoading: true,
          error: null,
        }

      case RECEIVE_CLIENT_TO_EDIT:
        return {
          ...state,
          ...action.payload,
          isLoading: false,
          error: null,
        }

      case ERROR_CLIENT_EDIT:
        return {
          ...state,
          isLoading: false,
          error: action.payload,
        }

      default:
        return state
    }
  }

This is called by the action and results in the state being updated.

Here is a picture showing editClient in the redux tools in chrome...

Why wont the page load "editClient"? What have I missed or misinterpreted.

By the way, here is the full form for client (I figure its better to have the full context re the form):

      import React, { PropTypes } from 'react'
  import { Field, reduxForm, FormSection } from 'redux-form'
  import { connect } from 'react-redux'
  import { Col, Row } from 'react-bootstrap'
  import { Button, Glyphicon, Panel } from 'react-bootstrap'
  import Moment from 'moment'
  import Address from '../../address/addressContainer'
  import FormField from '../../formComponents/formField'
  import CheckboxField from '../../formComponents/checkboxField'
  import TextField from '../../formComponents/textField'
  import StaticText from '../../formComponents/staticText'
  import TextAreaField from '../../formComponents/textAreaField'
  import DateField from '../../formComponents/datefield'

  import reducer from '../edit/reducer'

  export const CLIENT_FORM_NAME = 'Client'

  const required = value => (value ? undefined : 'Required')
  const maxLength = max => value =>
    value && value.length > max ? `Must be ${max} characters or less` : undefined
  const number = value =>
    value && isNaN(Number(value)) ? 'Must be a number' : undefined
  const minValue = min => value =>
    value && value < min ? `Must be at least ${min}` : undefined
  const email = value =>
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
      ? 'Invalid email address'
      : undefined
  const tooOld = value =>
    value && value > 65 ? 'You might be too old for this' : undefined
  const aol = value =>
    value && /.+@aol\.com/.test(value)
      ? 'Really? You still use AOL for your email?'
      : undefined

  const normalizeMobilePhone = value => {
    if (!value) {
      return value
    }

    const onlyNums = value.replace(/[^\d]/g, '')
    if (onlyNums.length <= 4) {
      return onlyNums
    }
    if (onlyNums.length <= 8) {
      return `${onlyNums.slice(0, 4)} ${onlyNums.slice(4)}`
    }
    return `${onlyNums.slice(0, 4)} ${onlyNums.slice(4, 7)} ${onlyNums.slice(7, 10)}`
  }

  export const Client = (props) => {
    const { 
      handleSubmit,
      companyValue,
      isWarrantyCompanyValue,
      isEditMode } = props

    const { reset } = props

    return (
      <Row>
        <Col md={12}>
          <h2><Glyphicon glyph="edit" /> {isEditMode ? 'Edit' : 'New'} Client</h2>
          <hr />
          <form onSubmit={handleSubmit} className="form-horizontal">
            {isEditMode && (
              <Panel header={<h3>Client - Basic Details</h3>}>
                <Row>
                  <Field component={StaticText}
                    name="clientNo"
                    id="clientNo"
                    label="Client No."
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />

                  <Field component={StaticText}
                    name="dateCreated"
                    id="dateCreated"
                    label="Date Created."
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />

                  <Field component={StaticText}
                    name="userName"
                    id="userName"
                    label="Created By."
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />
                </Row>

                <Row>
                  <Field
                    component={props => {
                      return (
                        <StaticText {...props}>
                          <p
                            className="form-control-static"
                          >
                            <Glyphicon glyph={props.input.value ? 'ok' : 'remove'} />
                            {' '}{props.input.value ? 'Has jobs attached' : 'No jobs attached'}
                          </p>
                        </StaticText>
                      )
                    }}
                    name="activity"
                    id="activity"
                    label="Activity"
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />

                  <Field component={CheckboxField}
                    name="active"
                    id="active"
                    label="De-Activate"
                    checkboxLabel="De activate this client"
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />
                </Row>
              </Panel>
            )}

            <Panel header={<h3>Client - CompanyDetails</h3>}>

              <Row>
                <Field component={CheckboxField}
                  id="company"
                  name="company"
                  label="Company?"
                  checkboxLabel="Client represents a company"
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                />
              </Row>
              {companyValue && (
                <div>
                  <Row>
                    <Field component={TextField}
                      name="companyName"
                      id="companyName"
                      type="text"
                      label="Company Name"
                      placeholder="Enter company name..."
                      fieldCols={6}
                      labelCols={3}
                      controlCols={9}
                    />

                    <Field component={TextField}
                      name="abn"
                      id="abn"
                      type="text"
                      label="ABN."
                      fieldCols={6}
                      labelCols={3}
                      controlCols={5}
                    />
                  </Row>
                  <Row>
                    <Field component={CheckboxField}
                      id="isWarrantyCompany"
                      name="isWarrantyCompany"
                      label="Warranty Company?"
                      checkboxLabel="Client represents a warranty company"
                      fieldCols={6}
                      labelCols={3}
                      controlCols={9}
                    />
                    {isWarrantyCompanyValue && (
                      <Field component={CheckboxField}
                        id="requiresPartsPayment"
                        name="requiresPartsPayment"
                        label="Requires Parts Payment?"
                        checkboxLabel="We pay for parts"
                        fieldCols={6}
                        labelCols={3}
                        controlCols={9}
                      />
                    )}
                  </Row>
                  <Row>
                    <Field component={TextField}
                      name="companyEmail"
                      id="companyEmail"
                      type="email"
                      label="Spare Parts Email."
                      placeholder="Enter spare parts email..."
                      fieldCols={6}
                      labelCols={3}
                      controlCols={9}
                    />
                  </Row>
                </div>
              )}
            </Panel>

            <Panel header={<h3>Client - {companyValue ? 'Company Contact' : 'Personal'} Details</h3>}>

              <Row>
                <Field component={TextField}
                  name="clientFirstName"
                  id="clientFirstName"
                  type="text"
                  label="First Name."
                  placeholder="Enter first name..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                  validate={[required]}
                />

                <Field component={TextField}
                  name="clientLastName"
                  id="clientLastName"
                  type="text"
                  label="Last Name."
                  placeholder="Enter last name..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                />
              </Row>

              <Row>
                <Field component={TextField}
                  name="mobilePhone"
                  id="mobilePhone"
                  type="text"
                  label="Mobile No."
                  placeholder="Enter mobile No..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={5}
                  normalize={normalizeMobilePhone}
                />

                <Field component={TextField}
                  name="phone"
                  id="phone"
                  type="text"
                  label="Phone No."
                  placeholder="Enter phone No..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={5}
                />
              </Row>

              <Row>
                <Field component={TextField}
                  name="email"
                  id="email"
                  type="email"
                  label="Email."
                  placeholder="Enter email address..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                />
              </Row>
            </Panel>

            <FormSection name="Address">
              <Address />
            </FormSection>

            <Panel header={<h3>Notes</h3>}>
              <Row>
                <Field component={TextAreaField}
                  id="notes"
                  name="notes"
                  label="Notes."
                  placeholder="Enter notes here..."
                  fieldCols={12}
                  labelCols={1}
                  controlCols={11}
                />
              </Row>
            </Panel>

            <Panel header={<h3>Client - Bank Details</h3>}>
              <Row>
                <Field component={TextField}
                  name="bankName"
                  id="bankName"
                  type="text"
                  label="Bank Name."
                  placeholder="Enter bank name..."
                  fieldCols={4}
                  labelCols={4}
                  controlCols={8}
                />

                <Field component={TextField}
                  name="bsb"
                  id="bsb"
                  type="text"
                  label="BSB No."
                  placeholder="Enter BSB No..."
                  fieldCols={4}
                  labelCols={4}
                  controlCols={8}
                />


                <Field component={TextField}
                  name="account"
                  id="account"
                  type="text"
                  label="Account No."
                  placeholder="Enter Account No..."
                  fieldCols={4}
                  labelCols={4}
                  controlCols={8}
                />
              </Row>
            </Panel>

            <div className="panel-body">
              <Row>
                <Col xs={4}>
                  <Row>
                    <Col xs={8} xsOffset={4}>
                      <Button bsStyle="primary" type="submit" bsSize="small">
                        <Glyphicon glyph="ok" /> Submit
                      </Button>
                      {' '}
                      <Button type="reset" bsSize="small" onClick={reset}>
                        <Glyphicon glyph="ban-circle" /> Clear
                      </Button>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>
          </form>
        </Col>
      </Row >
    )
  }

  let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

  })(Client)

        ClientForm = connect(
          state => ({
            initialValues: state.editClient // pull initial values from client reducer
          }),
          { reducer } // bind client loading action creator
        )(ClientForm)

  export default ClientForm

Luke · Accepted Answer · 2020-10-27 20:05:56Z

2

You are redefining ClientForm before you export it.

Try creating a new variable to assign your connect output to.

let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

 })(Client)
 
let ClientForm2 = connect(state => ({
 initialValues: { account: 'foo', bsb: 'bar', }
      }),
     { reducer } // bind client loading action creator
)(ClientForm)

export default ClientForm2

edited Oct 27, 2020 at 20:05

Luke

23.8k31 gold badges121 silver badges202 bronze badges

answered Aug 11, 2017 at 13:22

hairmot

2,9551 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

si2030 Over a year ago

That actually worked!! Could you eleborate on what I did wrong and why you need to create another variable to connect to the state..

hairmot Over a year ago

On a phone so can't explain well. the way you had it, you were passing the output of the connect function to itself - so we're getting unpredictable behaviour. By creating a separate variable, you are able to pass your redux form to the output of the connect function. It would be safer to initialise clientform as a const so that you don't accidentally run into this issue again (or at least would have gotten better error messages)

coderHASH64codingHASH46code Over a year ago

I have the exact same problem and I tried the suggested steps. It is still not working for me. If I hardcode the initialvalues, it works, but if the values come from the reducer after a later stage, the form is not loaded with initial values. Any suggestions?

coderHASH64codingHASH46code · Accepted Answer · 2020-05-10 19:37:27Z

1

I found the issue and the cause. It is NOT due to redefining or creating new variable. The form was not getting re-initialised after the reducer was updated. So this flag enableReinitialize: true in the props helped me solve the problem. https://redux-form.com/8.3.0/examples/initializefromstate/

Putting it here if someone faces the same problem as it is a very annoying problem.

answered May 10, 2020 at 19:37

coderHASH64codingHASH46code

1631 silver badge12 bronze badges

Collectives™ on Stack Overflow

Redux form - Initial values not loading in the form

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related