react redux ts todo

Tutorial de Redux por TypeScript

Probé el tutorial de Redux con TypeScript. (N-cambiar))
Escribiré mis mejores prácticas por ahora.

Configuració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を追加. 

Intervalor

Para controlarnos, hemos introducido tslint-config-airbnb .

Global

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

Es bueno escribir algo así.

Para más detalles, consulte tslint.json .

Acción, Creador de Acción

Las acciones se implementan en referencia a la acción estándar de flujo y los valores se almacenan dentro de payload .
La interfaz extiende la acción de Redux.

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

Además, al definir ActionType como enum, proporciona una implementación más segura.

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

Para especificar el tipo de argumento de acción en el reductor, es una buena idea exportar el tipo como un tipo compartido llamado TODOACTIONS.

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ; 

Estado

El estado es una interfaz definida en states/ . Cada estado se hace cargo de las ideas de Redux y se especifica como Readonly.
Al definir el estado del objeto, puede usar tipos en varios lugares, haciéndolo conveniente.

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

Además, al definir el estado de la raíz almacenada en la tienda con una interfaz, puede escribir el documento estatal interior en un documento.

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

Reductor, tienda

Simplemente debe implementarlo honestamente.

Componente de presentación

Dado que es un componente de presentación, básicamente se implementa como SFC.
Los props de argumentos se escribieron en tutoriales como ({ active, children, onClick }) , pero usando esto como referencia, los accesorios se expanden dentro de la función.
Lo que haces sigue siendo el mismo, por lo que puedes decidir en función de tu preferencia. Personalmente, si lo escribe como un argumento, la sección de definición de variable se vuelve demasiado redundante, por lo que prefiere el interior de la función.
Los accesorios de cada componente define una interfaz como 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 ;

Creo que SFC está bien para la aplicación directamente bajo el proveedor.

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

export default App ; 

Componente de contenedor

Parece que es exagerada, pero definimos DispatchToProps como los valores de retorno de mapStateToProps , como la interfaz StateToProp y mapDispatchToProps .

 interface StateToProps {
  todos: TodoState [ ] ;
}

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

Cuando AddTodo en el tutorial connect()(AddTodo) , el tipo de addtodo se vuelve vago, por lo que es una buena idea exportar la que connect()(AddTodo) tal como está.

Fecha actualizada

2018.4.13