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