react + redux项目中如何组织flowtype

Question

只是想收集一些关于如何在 React + redux 项目中组织 flowtype 的意见。这里有一些示例项目结构：

actions
    -> UserAction.js ---> has some flowtype definition related to this action
    -> PostAction.js ---> has some flowtype definition related to this action
    ...
reducers
    -> UserReducer.js ---> has some flowtype definition related to this reducer
    -> PostReducer.js ---> has some flowtype definition related to this reducer
    ...
models
    -> User.js ---> has some flowtype definition related to this model
    -> Post.js ---> has some flowtype definition related to this model
    ...
components
containers

但是，我看到一些开源项目，比如f8是使用一个文件来定义所有的类型，例如：

actions
    -> UserAction.js
    -> PostAction.js
    -> types.js --> all types related to actions
    ...
reducers
    -> UserReducer.js
    -> PostReducer.js
    -> types.js --> all types related to reducers
    ...
models
    -> User.js --->
    -> Post.js --->
    -> types.js --> all types related to models
    ...
components
containers

因此，我只想就如何以更具可持续性和可读性的方式组织 flowtype 征求意见。谢谢

Answer 1

首先，我想澄清一下术语； flow-typed 和 flow types 是两个不同但相关的概念。

在这种情况下，我们通常谈论的是 flow types，而不是 flow-typed，它是一个在概念上类似于 TypeScript 的绝对类型存储库的类型存储库。

流类型是要在库中使用的导出类型，因此有许多不同的组织方式。这部分是由于类型需要在使用前导入，因此在文件顶部。因此，在某些情况下将它们组织在文件之外是有意义的。这与常量的处理方式类似。

第一个示例选择将每种类型保留在各自的 class 中，这适用于大多数情况，但会在较大的项目中促进循环依赖。此选项需要管理的源文件较少，这在较小的项目中是有利的。

第二个例子选择导出每个构造的类型；例如：所有操作一起导出它们的类型。这减少了循环依赖的机会，并明确了从哪里导入类型。对于较大的项目，我建议使用此选项。

而不是：

import type { FooType } from './foo';
import type { BarType } from './bar';

我们可以：

import type { FooType, BarType } from './types';

react + redux项目中如何组织flowtype

How to organize flowtype in react + redux project

reactjs

react-native

redux

flowtype