react redux ts todo

Tutorial Redux por datilografado

Eu tentei o tutorial do Redux com o TypeScript. (N-Changing)
Vou escrever minhas próprias práticas recomendadas por enquanto.

Configurar

$ 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

Para nos controlar, introduzimos tslint-config-airbnb .

Global

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

É bom escrever algo assim.

Para mais detalhes, consulte tslint.json .

Ação, Criador de Ação

As ações são implementadas em referência à ação padrão e valores padrão são armazenados na payload .
A interface estende a ação do Redux.

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

Além disso, ao definir o ActionType como enum, ele fornece uma implementação mais segura.

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

Para especificar o tipo de argumento de ação no redutor, é uma boa idéia exportar o tipo como um tipo compartilhado chamado TODOActions.

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ; 

Estado

O estado é uma interface definida nos states/ . Cada estado assume as idéias do Redux e é especificado como readonamente.
Ao definir o estado do objeto, você pode usar tipos em vários lugares, tornando -o conveniente.

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

Além disso, ao definir o estado da raiz armazenado na loja com uma interface, você pode escrever o interior do documento do estado em um documento.

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

Redutor, loja

Você deve apenas implementá -lo honestamente.

Componente de apresentação

Como é um componente de apresentação, é basicamente implementado para ser SFC.
Os props de argumento foram escritos no tutorial como ({ active, children, onClick }) , mas usando isso como referência, os adereços são expandidos dentro da função.
O que você faz permanece o mesmo, para que você possa decidir com base em sua preferência. Pessoalmente, se você o escrever como um argumento, a seção de definição da variável ficará muito redundante, então você prefere o interior da função.
Os adereços de cada componente define uma interface como propops próprios.

 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 ;

Eu acho que o SFC é bom para o aplicativo diretamente sob o provedor.

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

export default App ; 

Componente de contêiner

Parece que é um exagero, mas definimos DispatchToProps como os valores de retorno do mapStateToProps , como interface StateToProp e mapDispatchToProps .

 interface StateToProps {
  todos: TodoState [ ] ;
}

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

Quando AddTodo no tutorial connect()(AddTodo) , o tipo de addToDO se torna vago, por isso é uma boa idéia exportar a que connect()(AddTodo) como está.

Data atualizada

2018.4.13