react redux ts todo

react redux ts todo

Anderer Quellcode

1.0.0

Herunterladen

Redux -Tutorial nach TypeScript

Ich habe das Tutorial von Redux mit TypeScript ausprobiert. (N-Veränderung)
Ich werde vorerst meine eigenen Best Practices aufschreiben.

Aufstellen

$ 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

Um uns selbst zu kontrollieren, haben wir tslint-config-airbnb eingeführt.

Global

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

Es ist gut, so etwas zu schreiben.

Weitere Informationen finden Sie unter tslint.json .

Aktion, Action -Schöpfer

Aktionen werden in Bezug auf die Flux -Standardaktion implementiert und Werte werden in payload gespeichert.
Die Schnittstelle erweitert die Aktion von Redux.

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

Durch die Definition von ActionType als Enum bietet es außerdem eine sicherere Implementierung.

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

Um den Typ des Aktionsarguments im Reduzierer anzugeben, ist es eine gute Idee, den Typ als gemeinsam genannter Typ mit dem Namen ToDoactions zu exportieren.

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ;

Zustand

Status ist eine Schnittstelle, die in states/ definiert ist. Jeder Staat übernimmt die Ideen von Redux und wird als readonly angegeben.
Durch die Definition des Objektzustands können Sie Typen an verschiedenen Stellen verwenden, wodurch es bequem ist.

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

Durch die Definition des Status des im Geschäft gespeicherten Stammes mit einer Schnittstelle können Sie das Innere des Statusdokuments in einem Dokument schreiben.

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

Reduzierer, Geschäft

Sie sollten es einfach ehrlich umsetzen.

Präsentationskomponente

Da es sich um eine Präsentationskomponente handelt, wird es im Grunde genommen als SFC implementiert.
Die Argument props wurden in Tutorial als ({ active, children, onClick }) geschrieben, aber als Referenz werden Requisiten innerhalb der Funktion erweitert.
Was Sie tun, bleibt gleich, sodass Sie sich aufgrund Ihrer Präferenz entscheiden können. Wenn Sie es als Argument schreiben, wird der Abschnitt Variable Definition persönlich zu überflüssig, sodass Sie das Innere der Funktion bevorzugen.
Die Requisiten der einzelnen Komponenten definieren eine Schnittstelle als eigene Props.

 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 ;

Ich denke, SFC ist für die App direkt unter Anbieter in Ordnung.

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

export default App ;

Containerkomponente

Es scheint, als wäre es übertrieben, aber wir definieren DispatchToProps -Schnittstelle als Rückgabewerte von mapStateToProps als StateToProp -Schnittstelle und mapDispatchToProps .

 interface StateToProps {
  todos: TodoState [ ] ;
}

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

Wenn AddTodo im Tutorial connect()(AddTodo) , wird die Art der Addtodo vage. Daher ist es eine gute Idee, die connect()(AddTodo) so gut zu exportieren.