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

【问题标题】：React.js + Flow: Convert functional component into class based componentReact.js + Flow：将功能组件转换为基于类的组件
【发布时间】：2017-08-31 08:33:10
【问题描述】：

我有一个功能组件，我想将其转换为基于类的组件，因为它太大了。我在转换mapStateToProps 函数时遇到问题，无法真正弄清楚如何获取用户数据。

我正在使用 react-redux 和 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>
  )
}))

我想把上面的代码变成这样：

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

我的主要问题是我不知道如何通过mapStateToProps 将用户的数据获取到组件。

【问题讨论】：

mapStateToProps 是相同的方法，无论您的组件实现（功能与否）。
你缺少减速器。你将如何管理状态
发现问题：在导入新组件时，我正在导入未连接的组件：import { ContactUser } from './contact-user，而不是 import ContactUser from './contact-user，它起作用了。

标签： reactjs

【解决方案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)

【讨论】：