# TypeScript与React实战(Redux篇)
我们在真正的项目中不可能仅仅只用组件就可以完成开发工作，一定会涉及到状态管理工具，目前最主流的莫过于 redux，我们会结合 redux 继续开发我们的 todo 应用。
# 定义Models
很多时候前端没有定义 Model 的习惯，不过在前端越来越重的今天，尤其是 TypeScript 的存在使得 model 定义更加友好。
我们因为只是个 demo，所以数据模型很简单，用简单的接口即可定义:
// models/Todo.ts
export interface Todo {
id: number
name: string
done: boolean
}
@前端进阶之旅: 代码已经复制到剪贴板
# Action相关
我们开始正式编写redux代码，首先需要定义 constants
// constants/todo.ts
export enum ActionTodoConstants {
ADD_TODO = 'todo/add',
TOGGLE_TODO = 'todo/toggle'
}
@前端进阶之旅: 代码已经复制到剪贴板
我们先实现一个 addTodo 函数:
// actions/todo.ts
let id = 0
const addTodo = (name: string) => ({
payload: {
todo: {
done: false,
id: id++,
name,
}
},
type: ActionTodoConstants.ADD_TODO,
})
@前端进阶之旅: 代码已经复制到剪贴板
由于在后面的 reducer 中我们需要函数返回的 Action 类型，所以我们得取得每个 action 函数的返回类型，其实这里有一个技巧，就是利用 TypeScript 强大的类型推导来反推出类型，我们可以先定义函数，再推导出类型。
type AddTodoAction = ReturnType<typeof addTodo>
@前端进阶之旅: 代码已经复制到剪贴板
接下来我们按照同样的方法实现 toggleTodo 即可
export type AddTodoAction = ReturnType<typeof addTodo>
export type ToggleTodoAction = ReturnType<typeof toggleTodo>
export type Action = AddTodoAction | ToggleTodoAction
@前端进阶之旅: 代码已经复制到剪贴板
# Reducer相关
Reducer 部分相对更简单一些，我们只需要给对应的参数或者初始 state 加上类型就好了。
// reducers/todo.ts
// 定义State的接口
export interface State {
todos: Todo[]
}
export const initialState: State = {
