本文詳細介紹了如何從零開始搭建一個 Typescript + React 開發(fā)的腳手架，包含如何添加 Redux 以及 React Router 的環(huán)境。
本文代碼地址：ts-react-redux
建議將代碼拉下來之后，配合本文一起查看，效果更佳。
代碼下載命令：git clone https://github.com/vettel-qin/ts-react-redux.git
相關(guān)文章目錄
從零開始，一步一步搭建Typescript + React + Redux項目——創(chuàng)建項目結(jié)構(gòu)（一）
從零開始，一步一步搭建Typescript + React + Redux項目——開發(fā)環(huán)境配置（二）
從零開始，一步一步搭建 Typescript + React + Redux項目——集成React（三）
從零開始，一步一步搭建 Typescript + React + Redux項目——集成Redux（四）
從零開始，一步一步搭建 Typescript + React + Redux項目——項目打包（五）
從零開始，一步一步搭建 Typescript + React + Redux項目——團隊合作規(guī)范（六）
1、安裝redux和react-redux 這里我們不需要安裝@types/redux，因為Redux已經(jīng)自帶了聲明文件（.d.ts文件）
yarn add redux react-redux @types/react-redux -S
接下來就以一個經(jīng)典的TodoList來測試redux。
2、添加actions
(1)、在src下新建constants目錄并在此目錄下創(chuàng)建index.ts文件，然后在文件中添加所需的消息類型
constants/index.ts
??(2)、在src下新建actions目錄并在此目錄下創(chuàng)建index.ts文件，然后創(chuàng)建這些 actions 的函數(shù)
actions/index.ts
3、添加reducer
在src下新建reducers目錄并在此目錄下創(chuàng)建index.ts和todoList.ts文件
reducers/todoList.ts
? ? ???
reducers/index.ts
?4、添加store
store是保存數(shù)據(jù)的地方，整個應用只有一個store。Redux提供了createStore函數(shù)來生成store。
5、創(chuàng)建展示組件
(1)、在components下新建AddTodo目錄并在此目錄下創(chuàng)建AddTodo.tsx和index.ts文件?
AddTodo.tsx
index.ts
(2)、在components下新建TodoItem目錄并在此目錄下創(chuàng)建TodoItem.tsx和index.ts文件
TodoItem.tsx
index.ts
(3)、在components下新建TodoList目錄并在此目錄下創(chuàng)建TodoList.tsx和index.ts文件?
TodoList.tsx
index.ts
???6、修改home容器組件
關(guān)鍵點是react-redux的connect函數(shù)，connect可以將我們的Home組件轉(zhuǎn)換成一個容器，通過以下兩個函數(shù):
a、mapStateToProps將當前store里的數(shù)據(jù)以我們的組件需要的形式傳遞到組件。
b、mapDispatchToProps利用dispatch函數(shù)，創(chuàng)建回調(diào)props將actions送到store。
7、創(chuàng)建store
回到src/entries/index.tsx，要把所有的東西合到一起，我們需要創(chuàng)建一個帶初始狀態(tài)的store，并用我們所有的reducers來設置它。
并且使用 react-redux 的 Provider 將 props 和 容器連接起來
??8、redux中間件之redux-thunk
redux-thunk是dispatch到達reducer之前，進行一些額外的操作，如日志記錄、創(chuàng)建崩潰報告、異步接口等
安裝redux-thunk? yarn add redux-thunk -D
在store目錄下index.ts,寫入如下框內(nèi)代碼：
文章及代碼中如有問題，歡迎指正，謝謝！
