react redux ts todo

Tutorial Redux oleh TypeScript

Saya mencoba tutorial Redux dengan naskah. (N-perubahan)
Saya akan menuliskan praktik terbaik saya sendiri untuk saat ini.

Pengaturan

$ 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

Untuk mengendalikan diri kami, kami telah memperkenalkan tslint-config-airbnb .

Global

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

Senang menulis sesuatu seperti itu.

Untuk detail lebih lanjut, lihat tslint.json .

Tindakan, Pencipta Tindakan

Tindakan diimplementasikan sehubungan dengan tindakan dan nilai -nilai standar fluks disimpan dalam payload .
Antarmuka memperluas aksi redux.

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

Selain itu, dengan mendefinisikan ActionType sebagai enum, ia memberikan implementasi yang lebih aman.

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

Untuk menentukan jenis argumen tindakan dalam peredam, adalah ide yang baik untuk mengekspor jenis sebagai jenis bersama yang disebut TODOACTIONS.

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ; 

Negara

Status adalah antarmuka yang ditentukan dalam states/ . Setiap negara bagian mengambil alih ide -ide Redux dan ditentukan sebagai readitly.
Dengan mendefinisikan keadaan objek, Anda dapat menggunakan jenis di berbagai tempat, membuatnya nyaman.

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

Selain itu, dengan mendefinisikan keadaan root yang disimpan di toko dengan antarmuka, Anda dapat menulis bagian dalam dokumen negara dalam dokumen.

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

Reducer, Store

Anda harus menerapkannya dengan jujur.

Komponen presentasi

Karena ini adalah komponen presentasi, pada dasarnya diimplementasikan sebagai SFC.
props argumen ditulis dalam tutorial sebagai ({ active, children, onClick }) , tetapi menggunakan ini sebagai referensi, alat peraga diperluas dalam fungsi.
Apa yang Anda lakukan tetap sama, sehingga Anda dapat memutuskan berdasarkan preferensi Anda. Secara pribadi, jika Anda menulisnya sebagai argumen, bagian definisi variabel menjadi terlalu berlebihan, sehingga Anda lebih suka bagian dalam fungsi.
Setiap alat peraga komponen mendefinisikan antarmuka sebagai 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 ;

Saya pikir SFC baik -baik saja untuk aplikasi langsung di bawah penyedia.

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

export default App ; 

Komponen wadah

Sepertinya itu berlebihan, tetapi kami mendefinisikan antarmuka DispatchToProps sebagai nilai pengembalian mapStateToProps , sebagai antarmuka StateToProp dan mapDispatchToProps .

 interface StateToProps {
  todos: TodoState [ ] ;
}

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

Saat AddTodo di tutorial connect()(AddTodo) , jenis Addtodo menjadi tidak jelas, jadi itu ide yang bagus untuk mengekspor yang connect()(AddTodo) apa adanya.

Tanggal yang diperbarui

2018.4.13