在开始之前，我想说的是，这是我的第一篇文章。 我不擅长用母语书写或表达自己的语言，而英语甚至更糟，但是我还没有找到一篇文章可以全面介绍Flow with React＆Redux，所以我决定写它我自己。
注释动作
让我们从动作创建者开始。 这是位样板，我们必须指定要输入的内容和要输出的内容（包括type非常重要的一点是，指定type与常量中的值相同，而不仅仅是string 。 因此，如果您有APP_LOCALE = 'APP_LOCALE' ，则必须说类型为'APP_LOCALE'而不是string 。
//@流
导出类型AppLocaleChangeType = {
类型：“ APP / LOCALE：CHANGE”，
语言环境：字符串
};
导出函数appLocaleChange（语言环境：字符串）：AppLocaleChangeType {
返回{type：APP.LOCALE.CHANGE，locale};
}
有了这个，我们可以定义一个可能的动作列表，称为ActionType和dispatcher。 我们将重用来自redux的Dispatch ，并使用我们刚刚定义为参数类型的ActionType联合。 我通常在actions/index包含此内容，然后在需要时导入。
//@流
从“ redux”导入类型{Dispatch as DispatchRedux}；
导入类型{
AppLocaleChangeType
}来自“ ./locales”；
导出类型ActionType = AppLocaleChangeType | ...
导出类型Dispatch = DispatchRedux
注释状态（减速器）
现在我们可以进入下一部分，并写出我们的状态。 在这里，它开始变得有趣。 首先，我们需要导入在actions/index定义的ActionType并声明reducer的状态。 当使用这些类型时，我们将在切换/案例中看到我们正在处理什么动作，我们拥有哪些选项以及状态看起来如何。
//@流
从“动作/索引”导入类型{ActionType}；
导出类型AppState = {
+语言环境：字符串
}
const initState：AppState = {
区域设置：“ en”
}
导出默认函数reducer（state：AppState = initialState，action：ActionType）{
开关（action.type）{
案例APP.LOCALE.CHANGE：
return {... state，locale：action.locale};
默认：
返回状态；
}
展望未来，我们可以将已定义的“ reducers”状态重新用于整个应用程序状态。 在reducers/index保持状态将使我们的代码保持结构化。
//@流
从“ ./app”导入类型{AppState}；
出口类型State = {
+ app：AppState
}
组件
现在，我们知道状态如何，可以使用什么操作以及如何使用。 因此，让我们编写一个连接到redux的组件，看看它给我们带来了什么好处。
// @流
从'react'导入React；
从'react-redux'导入{connect};
从'actions / app'导入{appLocaleChange};
从“操作/索引”导入类型{Dispatch}；
输入Props = {
调度：调度
}
const语言=（道具：道具）=> {
const onChange =（事件：SyntheticEvent ）=> {
如果（event.target instanceof HTMLInputElement）{
props.dispatch（appLocaleChange（event.target.value））;
}
};
返回（
英语
捷克
）;
};
导出默认语言；
流量将导致类似下面的图所示。 现在基本上是不可能犯错误的， dispatch只能执行actions/index指定的actions/index之一，而这些动作只能采用给定的参数。
快到了 。 对我来说，这是最难解决的部分，以Atom或任何其他IDE易于理解的方式映射状态属性和组件属性。 其中最重要的部分是正确注释mapStateToProps以进行connect以了解传入的内容以及作为属性传递的内容。 为了实现所需的状态，我们需要导入State ，为组件属性定义OwnProps ，为从状态映射并注入到组件中的属性定义StateProps 。 为此，我们将从react-redux导入MapStateToProps类型，并将其用作将状态映射到道具的函数的定义，通常将其称为波纹管之类的mapStateToProps 。
const mapStateToProps：MapStateToProps =（状态）=>（{
...
}）;
这就是更改后我们的组件的外观。
// @流
从'react'导入React；
从'react-redux'导入{connect};
从'actions / app'导入{appLocaleChange};
从“商店/类型”导入类型{State}；
从“操作/索引”导入类型{Dispatch}；
从'react-redux'导入类型{MapStateToProps};
输入OwnProps = {
可见：布尔值
}
输入StateProps = {
语言环境：字符串
}
输入Props = {
调度：调度
}和OwnProps和StateProps
const语言=（道具：道具）=> {
如果（！props.visible）{
返回null;
}
const onChange =（事件：SyntheticEvent ）=> {
如果（event.target instanceof HTMLInputElement）{
props.dispatch（appLocaleChange（event.target.value））;
}
};
返回（
英语
捷克
）;
};
const mapStateToProps：MapStateToProps =（状态）=>（{
区域设置：state.app.locale
}）;
导出默认的connect（mapStateToProps）（Language）;
现在，我们不仅可以访问组件中的状态，还可以mapStateToProps函数中的状态中的所有属性。 正确定义StateProps以反映实际的返回值确实很重要，否则它会引起错误。
好了，我们完成了，现在应用程序从上到下都覆盖着Flow。 希望对您有所帮助。 这段代码是从我的真实应用程序中提取的，因此很遗憾，我无法共享源代码，但是如果您愿意，可以在GitHub上启用了流程的React样板中随意使用它
