React和Redux的全面流程

在开始之前,我想说的是,这是我的第一篇文章。 我不擅长用母语书写或表达自己的语言,而英语甚至更糟,但是我还没有找到一篇文章可以全面介绍Flow with ReactRedux,所以我决定写它我自己。

注释动作

让我们从动作创建者开始。 这是位样板,我们必须指定要输入的内容和要输出的内容(包括type非常重要的一点是,指定type与常量中的值相同,而不仅仅是string 。 因此,如果您有APP_LOCALE = 'APP_LOCALE' ,则必须说类型为'APP_LOCALE'而不是string

  //@流 
 导出类型AppLocaleChangeType = { 
类型:“ APP / LOCALE:CHANGE”,
语言环境:字符串
};
 导出函数appLocaleChange(语言环境:字符串):AppLocaleChangeType { 
返回{type:APP.LOCALE.CHANGE,locale};
}

有了这个,我们可以定义一个可能的动作列表,称为ActionType和dispatcher。 我们将重用来自reduxDispatch ,并使用我们刚刚定义为参数类型的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样板中随意使用它