react redux ts todo

Tutoriel redux par dactylographie

J'ai essayé le tutoriel de Redux avec TypeScript. (N change)
Je vais écrire mes propres meilleures pratiques pour le moment.

Installation

$ 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

Pour nous contrôler, nous avons introduit tslint-config-airbnb .

Mondial

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

C'est bien d'écrire quelque chose comme ça.

Pour plus de détails, voir tslint.json .

Action, créateur d'action

Les actions sont implémentées en référence à l'action standard de flux et les valeurs sont stockées dans payload .
L'interface étend l'action de redux.

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

De plus, en définissant ActionType comme enum, il fournit une implémentation plus sûre.

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

Pour spécifier le type de l'argument d'action dans Reducer, il est une bonne idée d'exporter le type en tant que type partagé appelé toactions.

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ; 

État

L'état est une interface définie dans states/ . Chaque État reprend les idées de Redux et est spécifié comme Readonly.
En définissant l'état d'objet, vous pouvez utiliser des types à divers endroits, ce qui le rend pratique.

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

De plus, en définissant l'état de la racine stockée dans le magasin avec une interface, vous pouvez écrire l'intérieur du document d'état dans un document.

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

Réducteur, magasin

Vous devez simplement le mettre en œuvre honnêtement.

Composant de présentation

Puisqu'il s'agit d'un composant de présentation, il est essentiellement mis en œuvre pour être SFC.
Les props d'argument ont été écrits en tutoriel comme ({ active, children, onClick }) , mais en utilisant cela comme référence, les accessoires sont élargis dans la fonction.
Ce que vous faites reste le même, vous pouvez donc décider en fonction de vos préférences. Personnellement, si vous l'écrivez comme argument, la section de définition variable devient trop redondante, vous préférez donc l'intérieur de la fonction.
Les accessoires de chaque composant définissent une interface comme 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 ;

Je pense que SFC est bien pour l'application directement sous fournisseur.

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

export default App ; 

Composant de conteneur

Il semble que ce soit exagéré, mais nous définissons DispatchToProps comme les valeurs de retour de mapStateToProps , comme interface StateToProp et mapDispatchToProps .

 interface StateToProps {
  todos: TodoState [ ] ;
}

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

Lorsque AddTodo dans le tutoriel connect()(AddTodo) , le type d'addtodo devient vague, c'est donc une bonne idée d'exporter celui que connect()(AddTodo) tel quel.

Date mise à jour

2018.4.13