从零开始，一步一步搭建Typescript+React+Redux项目——集成Redux(四)

本文详细介绍了如何从零开始搭建一个 Typescript + React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。

本文代码地址：ts-react-redux

建议将代码拉下来之后，配合本文一起查看，效果更佳。

1、安装redux和react-redux 这里我们不需要安装@types/redux，因为Redux已经自带了声明文件（.d.ts文件）

yarn add redux react-redux @types/react-redux -S

接下来就以一个经典的TodoList来测试redux。

2、添加actions

(1)、在src下新建constants目录并在此目录下创建index.ts文件，然后在文件中添加所需的消息类型

constants/index.ts

(2)、在src下新建actions目录并在此目录下创建index.ts文件，然后创建这些 actions 的函数

actions/index.ts

3、添加reducer

在src下新建reducers目录并在此目录下创建index.ts和todoList.ts文件

reducers/todoList.ts

reducers/index.ts

4、添加store

store是保存数据的地方，整个应用只有一个store。Redux提供了createStore函数来生成store。

5、创建展示组件

(1)、在components下新建AddTodo目录并在此目录下创建AddTodo.tsx和index.ts文件

AddTodo.tsx

index.ts

(2)、在components下新建TodoItem目录并在此目录下创建TodoItem.tsx和index.ts文件

TodoItem.tsx

index.ts

(3)、在components下新建TodoList目录并在此目录下创建TodoList.tsx和index.ts文件

TodoList.tsx

index.ts

6、修改home容器组件

关键点是react-redux的connect函数，connect可以将我们的Home组件转换成一个容器，通过以下两个函数:

a、mapStateToProps将当前store里的数据以我们的组件需要的形式传递到组件。

b、mapDispatchToProps利用dispatch函数，创建回调props将actions送到store。

7、创建store

回到src/entries/index.tsx，要把所有的东西合到一起，我们需要创建一个带初始状态的store，并用我们所有的reducers来设置它。

并且使用 react-redux 的 Provider 将 props 和容器连接起来

8、redux中间件之redux-thunk

redux-thunk是dispatch到达reducer之前，进行一些额外的操作，如日志记录、创建崩溃报告、异步接口等

安装redux-thunk yarn add redux-thunk -D

在store目录下index.ts,写入如下框内代码：

文章及代码中如有问题，欢迎指正，谢谢！