React.js + Flow：機能コンポーネントをクラスベースのコンポーネントに変換する

Question

私はクラスベースのコンポーネントに変換する機能コンポーネントがあります。私はmapStateToProps関数を変換する際に問題がありますが、実際にユーザーデータを取得する方法を理解することはできません。

私はreact-reduxとFlowを使用しています。

// ... imports 

import type { ActionCreator } from 'redux' 
import type { Participants$PhonesModel } from '<coaching>/types/participants' 

type State = { 
    ContactUser: { 
    birthDate: moment(birthDate).format('L'), 
    city, 
    firstName, 
    lastName, 
    adresses, 
    time 
    }, 
    ... 
} 

type Props = { 
    // ... props 
} & State 

export class ContactUser extends Component { 
    props: Props; 

    // methods, etc. 

    render() { 
    return (
     <div> 
     ... 
     </div> 
    ) 
    } 
} 

const mapStateToProps = ({state: State}) => { 
    return { 
    ... 
    } 
} 

const mapDispatchToProps = { markPhoneAsInvalid, markPhoneAsValid } 

export default connect(mapStateToProps, mapDispatchToProps)(ContactUser) 

私の主な問題は、私はへのユーザーのためのデータを取得する方法を見つけ出すことができないということです。私はこのような何かに上記のコードを有効にする

import { connect } from 'react-redux' 
import moment from 'moment' 
import 'moment-timezone/builds/moment-timezone-with-data-2010-2020' 
import React, { Component } from 'react' 

import styles from './contact-user.scss' 
import { CSSModules } from 'app/lib/css-modules' 

const applyCSS = CSSModules(styles) 

export const mapStateToProps = ({ 
    user: { data: { 
    birthDate, 
    city, 
    firstName, 
    lastName, 
    adresses, 
    timeZone } } 
}) => ({ 
    birthDate: moment(birthDate).format('L'), 
    city, 
    firstName, 
    lastName, 
    adresses, 
    time: timeZone ? moment().tz(timeZone).format('h:mm A z') : '' 
}) 

export const ContactUser = connect(mapStateToProps)(applyCSS(({ 
    adresses, 
    time 
}) => { 
    const addressDetails =() => { 
    ... 
    } 

    const sortAddresses = (a, b) => { 
    ... 
    } 

    const handleButtonClick = (phoneType) => { 
    ... 
    } 

    return (
    <div> 
     <h1>Contact the User</h1> 
     <div className='text-center'> 
     { 
      Object.keys(adresses).length 
      ? <MyComponent 
       data={adresses.sort(sortAddresses)} 
      /> 
      : <h2>No Adresses</h2> 
     } 
     </div> 
     {time} 
     ... 
    </div> 
) 
})) 

コンポーネント：mapStateToProps。

Answer 1

mapStateToProps実装は同じです、私は言う必要があります。どんな場合でも：

class ContactUser extends Component { 
    render() { 
    ... 
    } 
} 

const mapStateToProps = (state) => { 
    const { 
    birthDate, 
    city, 
    firstName, 
    lastName, 
    addresses, 
    timeZone, 
    } = state.user.data 

    return { 
    birthDate: moment(birthDate).format('L'), 
    city, 
    firstName, 
    lastName, 
    adresses, 
    time: timeZone ? moment().tz(timeZone).format('h:mm A z') : '' 
    } 
} 

const mapDispatchToProps =() => { ... } 

export default connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(ContactUser)