Question

流动让我发疯。即使使用某种基本的＆＃34;它真的很舒服。代码，在使用HOC时很难输入（正如你在我最后的一些问题中看到的那样......）。

所以，我有一个组件：

需要来自父组件（activeProject）
连接到Redux商店
使用Redux商店中的数据使用GraphQL
呈现一些使用redux＆amp; amp;的组件。 GraphQL数据

我确实可以跳过键入我的代码的这一部分，但我喜欢在整个应用程序中保持类型安全的想法。

这是我所描述的组件的当前实现：

// @flow

import React from 'react'
import { connect } from 'react-redux'
import { compose, graphql } from 'react-apollo'
import type { OperationComponent, QueryProps } from 'react-apollo'
import type { Connector } from 'react-redux'

import { Loading } from 'components'

import { getProjectList } from 'queries'

import ProjectFilter from './Filter'
import ProjectList from './List'

import { Wrapper } from './elements'

type GraphQLResponse = {
  customers: {
    [string | number]: any
  }
}

type InputProps = {
  activeProject: number
}

type StoreProps = {
  showArchivedProjects: boolean
}

type GraphQLProps = GraphQLResponse & QueryProps

type GrapQLInputProps = InputProps & StoreProps

type CombinedProps = GraphQLProps & StoreProps & InputProps

const withGraphQL: OperationComponent<GraphQLResponse, GrapQLInputProps, GraphQLProps> = graphql(getProjectList, {
  options: ({ showArchivedProjects }) => ({
    fetchPolicy: 'cache-and-network',
    variables: {
      archived: showArchivedProjects
    }
  }),
  props: ({ data }) => ({ ...data })
})

const withStore: Connector<*, StoreProps> = connect(
  state => ({
    showArchivedProjects: state.projects.showArchivedProjects
  }),
  {}
)

const enhanced = compose(
  withGraphQL,
  withStore
)

const ProjectSidebar = enhanced(({ activeProject, loading, customers }: CombinedProps) => {
  return (
    <Wrapper>
      <ProjectFilter />

      {loading && <Loading isLoading={true} float={true} top="calc(100vh - 100px)" />}
      {customers && <ProjectList activeProject={activeProject} customers={customers} />}
    </Wrapper>
  )
})

export default ProjectSidebar

在此代码上运行flow，我在withStore（compose内）收到以下错误：

无法调用撰写因为：

•函数[1]与React.Component [2]的静态不兼容   •或者StoreProps [3]中缺少属性客户，但第一个参数中存在GraphQLResponse [4]。

我的StoreProps为何应该了解customers？这次尝试有什么问题？

我非常确定我使用了一些错误的工具，但在查看（数小时）示例/应用/文档之后，使用了react-apollo，{{1 }和redux，我只是放弃了......

如何使用Flow将类型定义添加到组合增强器中？

0 个答案: