react redux ts todo

TypeScript의 Redux 튜토리얼

TypeScript로 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を追加. 

린터

우리 자신을 통제하기 위해, 우리는 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을 ENUM으로 정의함으로써 더 안전한 구현을 제공합니다.

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

Reducer에서 액션 인수의 유형을 지정하려면 유형을 공유 유형으로 내보내는 것이 좋습니다.

 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 }) 로 작성되었지만이를 참조로 사용하면 기능 내에서 소품이 확장됩니다.
당신이하는 일은 동일하게 유지되므로 선호도에 따라 결정할 수 있습니다. 개인적으로, 인수로 작성하면 변수 정의 섹션이 너무 중복되므로 함수 내부를 선호합니다.
각 구성 요소의 소품은 인터페이스를 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 ;
}

튜토리얼의 AddTodo connect()(AddTodo) 되면 AddTodo 유형이 모호 해지므로 connect()(AddTodo) 그대로 내보내는 것이 좋습니다.

업데이트 된 날짜

2018.4.13