Reduxフォーム - フォームにロードされていない初期値

Question

これは初心者です。

私はクライアントの詳細を変更するための編集フォームとして使用されるかなり長いフォームを持っています。フォームはロードされますが、値はロードされません。 "foo"や "bar"などのフィールドの値をハードコードすることをお勧めしました。これを行うと、テキストフィールドでこれらの文字列を取得します。

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 

しかし、私は「state.editClientは」値を持っている場合でも、次のコード何も起こらない使用している場合：

はここで働くの初期値をハードコーディングするためのフォームの終わりに私のコードです。

 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 

今、私は次のインポート使用して、私の減速をインポートします。

 import reducer from '../edit/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 
    } 
    } 

これは、アクションによって呼び出され、状態の結果が更新されています。ここで

は、なぜ文句を言わない、ページの読み込み "editClient"

...クロムでReduxのツールでeditClientを示す写真でありますか？私は何を逃したのか誤解したのですか？

 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 

Answer 1

あなたはそれをエクスポートする前に、あなたはClientFormを再定義している：ところで

は、ここでは、クライアントのための完全な形式（私は、フォームの再完全なコンテキストを持っているために、その優れたを把握する）です。

新しい出力変数を作成して、接続出力を割り当ててみてください。実際に働いていた

let ClientForm = reduxForm({ 
    form: CLIENT_FORM_NAME, 

})(Client) 

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

）（ClientForm）

輸出デフォルトClientForm2