react redux ts todo

Redux教程通过打字稿

我尝试了使用打字稿的Redux的教程。 （n改变）
我现在写下自己的最佳实践。

设置

$ create-react-app < App名> --scripts-version=react-scripts-ts # TypeScriptで作成.
$ yarn add redux react-redux # reduxを追加
$ yarn add -D @types/react-redux tslint-config-airbnb # reduxのtypeと、air-bnbのtslintを追加. 

Linter

为了控制自己，我们引入了tslint-config-airbnb 。

全球的

 "globals" : {
    "window" : true ,
    "location" : true ,
    "document" : true
  },

写这样的东西是一件好事。

有关更多详细信息，请参见tslint.json 。

行动，行动创造者

参考通量标准操作实施操作，并将值存储在payload中。
该接口扩展了Redux的动作。

 interface AddTodoAction extends Action {
  type: ActionTypes . ADD_TODO ;
  payload: {
    id: number ;
    text: string ;
  } ;
}

此外，通过将ActionType定义为枚举，它提供了更安全的实现。

 export enum ActionTypes {
  ADD_TODO = 'ADD_TODO' ,
  SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' ,
  TOGGLE_TODO = 'TOGGLE_TODO' ,
}

为了指定REDUCER中的操作参数的类型，最好将类型导出为称为TODOACTIONS的共享类型。

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ; 

状态

状态是states/定义的接口。每个州接管Redux的想法，并指定为Readonly。
通过定义对象状态，您可以在各个地方使用类型，从而使其方便。

 export interface TodoState {
  readonly id : number ;
  readonly text : string ;
  readonly completed : boolean ;
}

此外，通过定义使用接口存储在商店中的根状态，您可以在文档中写入状态文档的内部。

export interface State {
  readonly visibilityFilter : VisibilityFilters ;
  readonly todos : TodoState [ ] ;
} 

还原器，商店

您应该诚实地实施它。

介绍组件

由于它是一个介绍组件，因此基本上实现为SFC。
参数props写在教程中为({ active, children, onClick }) ，但使用此作为参考，Props在函数中扩展。
您要做的事情保持不变，因此您可以根据自己的喜好决定。就个人而言，如果将其写为参数，则变量定义部分会变得太冗余，因此您更喜欢函数的内部。
每个组件的道具将接口定义为Ownprops。

 export interface OwnProps {
  active: boolean ;
  onClick: ( ) => any ;
}

const Link : React . SFC < OwnProps > = (props) = > {
  const { children , active , onClick } = props;

  return (
    < button
      onClick = { onClick }
      disabled = { active }
      style = { {
        marginLeft : '4px' ,
      } }
    >
      { children }
    </ button >
  );
} ;

export default Link ;

我认为SFC对提供商的应用程序不错。

 const App : React . SFC = ( ) => (
  < div >
    < AddTodo />
    < VisibleTodoList />
    < Footer />
  </ div >
) ;

export default App ; 

容器组件

似乎是过度的，但是我们将DispatchToProps接口定义为mapStateToProps的返回值，为StateToProp接口和mapDispatchToProps 。

 interface StateToProps {
  todos: TodoState [ ] ;
}

interface DispatchToProps {
  toggleTodo: ( id : number ) => any ;
}

当connect()(AddTodo)教程中的AddTodo （）（ADDTODO）时，Addtodo的类型变得模糊，因此，最好像以IS一样导出connect()(AddTodo)好主意。

更新日期

2018.4.13