React.js + Flow：将功能组件转换为基于类的组件

Question

I have a functional component that I want to convert into a class based component, because it got too large. I have a problem with converting the mapStateToProps function, can't really figure out how to fetch the user data.

I'm using react-redux and Flow.

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>
  )
}))

I want to turn the above code into something like this:

// ... 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)

My main problem is that I can't figure out how to get the data for a user to the component via mapStateToProps .

Answer 1

mapStateToProps implementation is the same, I must say. In any case:

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)