react redux ts todo

การสอน Redux โดย typescript

ฉันลองบทช่วยสอนของ Redux ด้วย TypeScript (การเปลี่ยนแปลง 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 และระบุไว้อย่างเดียว
โดยการกำหนดสถานะวัตถุคุณสามารถใช้ประเภทในสถานที่ต่าง ๆ ทำให้สะดวก

 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 ; 

ส่วนประกอบคอนเทนเนอร์

ดูเหมือนว่ามันจะ overkill แต่เรากำหนดอินเทอร์เฟซ DispatchToProps เป็นค่าส่งคืนของ mapStateToProps เป็นอินเทอร์เฟซ StateToProp และ mapDispatchToProps

 interface StateToProps {
  todos: TodoState [ ] ;
}

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

เมื่อ AddTodo ในบทช่วย connect()(AddTodo) ประเภทของ addtodo จะคลุมเครือดังนั้นจึงเป็นความคิดที่ดีที่จะส่งออกสิ่งที่ connect()(AddTodo) ตามที่เป็นอยู่

อัปเดตวันที่

2018.4.13