react redux ts todo

Учебное пособие Redux по TypeScript

Я попробовал учебное пособие Redux с TypeScript. (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を追加. 

Линтер

Чтобы контролировать себя, мы представили tslint-config-airbnb .

Глобальный

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

Хорошо написать что -то подобное.

Для получения более подробной информации см. tslint.json .

Действие, создатель действий

Действия реализованы в отношении стандартного действия Flux, а значения хранятся в рамках payload .
Интерфейс расширяет действие Redux.

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

Кроме того, определяя ActionType как Enum, он обеспечивает более безопасную реализацию.

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

Чтобы указать тип аргумента действия в Reducer, рекомендуется экспортировать тип как общий тип, называемый Todoctions.

 export type TodoActions = AddTodoAction | SetVisibilityFilterAction | ToggleTodoAction ; 

Состояние

Состояние - это интерфейс, определенный в states/ . Каждое состояние принимает идеи Redux и определяется как Readonly.
Определяя состояние объекта, вы можете использовать типы в разных местах, что делает его удобным.

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

Кроме того, определяя состояние корня, хранящегося в магазине с интерфейсом, вы можете написать внутреннюю часть государственного документа в документе.

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

Reducer, магазин

Вы должны просто реализовать это честно.

Презентационный компонент

Поскольку это презентационный компонент, он в основном реализован как SFC.
props были записаны в учебном пособии как ({ active, children, onClick }) , но с использованием этого в качестве ссылки реквизиты расширяются в рамках функции.
То, что вы делаете, остается прежним, поэтому вы можете решить, основываясь на своих предпочтениях. Лично, если вы пишете его как аргумент, раздел определения переменной становится слишком избыточным, поэтому вы предпочитаете внутреннюю часть функции.
Реквизиты каждого компонента определяют интерфейс как собственные Проводники.

 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 ;

Я думаю, что SFC подходит для приложения непосредственно под поставщиком.

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

export default App ; 

Контейнерный компонент

Кажется, что это излишне, но мы определяем интерфейс DispatchToProps как возвращаемые значения mapStateToProps , как интерфейс StateToProp и mapDispatchToProps .

 interface StateToProps {
  todos: TodoState [ ] ;
}

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

Когда AddTodo в учебном пособии connect()(AddTodo) , тип AddTodo становится расплывчатым, поэтому рекомендуется экспортировать тот, который connect()(AddTodo) как есть.

Обновленная дата

2018.4.13