React/Reduxのオブジェクトである状態の値をどのように参照できますか？

Question

私はかなり一般的な反応/還元問題に悩まされています：

私はオブジェクトである私のアプリケーションに状態を持っています。私のコンポーネントで使用するmapStateToPropsがあるときはいつでも、定義されているすべてのフィールドがあるオブジェクトがあることを確認できますが、フィールドの値を取得しようとすると「未定義」になります。次のように私のアプローチは、次のとおりです。

customer_form_reducer.js

export default function(state = {}, action) { 
    switch(action.type) { 
    case UPDATE_CLIENT_INFO: 
     console.log('Client: ', action.payload); 
     console.log('First Name: ', action.payload.firstName); 
     return { ...state, 
     client: { 
      firstName: action.payload.firstName, 
      lastName: action.payload.lastName, 
      homePhone: action.payload.homePhone, 
      cellPhone: action.payload.cellPhone, 
      email: action.payload.email, 
      address: action.payload.address, 
      customerMOB: action.payload.customerMOB, 
      customerYOB: action.payload.customerYOB 
     } 
    } 
    } 
    return state; 
} 

私はrootReducer内のすべての私のレデューサー接続：

index.js私のコンポーネントで今

//other import statements 
import customerReducer from './customer_form_reducer'; 

const rootReducer = combineReducers({ 
    form, 
    auth: authReducer, 
    admin: adminReducer, 
    client: customerReducer, 
    spouse: spouseReducer, 
    child: childReducer, 
    other: otherReducer, 
    accountId: accountIdReducer, 
    customerId: customerIdReducer 
}); 

export default rootReducer; 

：

を

customer_info_form.js

import { reduxForm } from 'redux-form'; 

class CustomerInfoForm extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     accountId: props.accountId, 
     client: props.client, 
     firstName: props.firstName, 
    }; 

    console.log(this.state.accountId); 
    console.log(this.state.client); 
    console.log(this.state.client.firstName); 
    console.log(this.state.firstName); 
} 

function mapStateToProps(state) { 
    return { accountId: state.accountId, client: state.client, 
firstName: state.client.firstName } 
} 

export default reduxForm({ 
    form: 'CustomerInfoForm', 
    fields: _.keys(FIELDS), 
    validate 
}, mapStateToProps, { updateClientInfo })(CustomerInfoForm); 

最初の2つのコンソールログが正しいデータを表示します。次の2つは、クライアントオブジェクトに格納されている値を使用/参照しようとする2つの試みです。私のコンソールは、私のクライアントオブジェクトが上記の行に定義されたfirstNameを持っていると主張していますが、どちらも "undefined"を返します。クライアントオブジェクトに含まれる実際の値を使用/参照するにはどうすればよいですか？

Answer 1

customer_form_reducer.jsのデフォルトの状態は、空のオブジェクトです。印刷する価値はどれくらいですか？