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 (
      
        
           {isEditMode ? 'Edit' : 'New'} Client
          
          
            {isEditMode && (
              Client - Basic Details}>
                
                  

                  

                  
                

                
                   {
                      return (
                        
                          
                            
                            {' '}{props.input.value ? 'Has jobs attached' : 'No jobs attached'}
                          
                        
                      )
                    }}
                    name="activity"
                    id="activity"
                    label="Activity"
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />

                  
                
              
            )}

            Client - CompanyDetails}>

              
                
              
              {companyValue && (
                
                  
                    

                    
                  
                  
                    
                    {isWarrantyCompanyValue && (
                      
                    )}
                  
                  
                    
                  
                
              )}
            

            Client - {companyValue ? 'Company Contact' : 'Personal'} Details}>

              
                

                
              

              
                

                
              

              
                
              
            

            
              
            

            Notes}>
              
                
              
            

            Client - Bank Details}>
              
                

                


                
              
            

            
              
                
                  
                    
                      
                      {' '}
                      
                    
                  
                
              
            
          
        
      
    )
  }

  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

hairmot · Accepted Answer

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

Redux form - Initial values not loading in the form

Answers (2)

Related Questions