本文詳細(xì)介紹了如何從零開(kāi)始搭建一個(gè) Typescript + React 開(kāi)發(fā)的腳手架，包含如何添加 Redux 以及 React Router 的環(huán)境谬泌。
本文代碼地址：ts-react-redux
建議將代碼拉下來(lái)之后滔韵，配合本文一起查看，效果更佳掌实。
代碼下載命令：git clone https://github.com/vettel-qin/ts-react-redux.git
相關(guān)文章目錄
從零開(kāi)始陪蜻，一步一步搭建Typescript + React + Redux項(xiàng)目——?jiǎng)?chuàng)建項(xiàng)目結(jié)構(gòu)（一）
從零開(kāi)始，一步一步搭建Typescript + React + Redux項(xiàng)目——開(kāi)發(fā)環(huán)境配置（二）
從零開(kāi)始贱鼻，一步一步搭建 Typescript + React + Redux項(xiàng)目——集成React（三）
從零開(kāi)始宴卖，一步一步搭建 Typescript + React + Redux項(xiàng)目——集成Redux（四）
從零開(kāi)始，一步一步搭建 Typescript + React + Redux項(xiàng)目——項(xiàng)目打包（五）
從零開(kāi)始忱嘹，一步一步搭建 Typescript + React + Redux項(xiàng)目——團(tuán)隊(duì)合作規(guī)范（六）
1嘱腥、安裝redux和react-redux 這里我們不需要安裝@types/redux，因?yàn)镽edux已經(jīng)自帶了聲明文件（.d.ts文件）
yarn add redux react-redux @types/react-redux -S
接下來(lái)就以一個(gè)經(jīng)典的TodoList來(lái)測(cè)試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ù)的地方，整個(gè)應(yīng)用只有一個(gè)store蘑斧。Redux提供了createStore函數(shù)來(lái)生成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)鍵點(diǎn)是react-redux的connect函數(shù)惠拭，connect可以將我們的Home組件轉(zhuǎn)換成一個(gè)容器扩劝，通過(guò)以下兩個(gè)函數(shù):
a、mapStateToProps將當(dāng)前store里的數(shù)據(jù)以我們的組件需要的形式傳遞到組件职辅。
b棒呛、mapDispatchToProps利用dispatch函數(shù)，創(chuàng)建回調(diào)props將actions送到store域携。
7簇秒、創(chuàng)建store
回到src/entries/index.tsx，要把所有的東西合到一起秀鞭，我們需要?jiǎng)?chuàng)建一個(gè)帶初始狀態(tài)的store宰睡，并用我們所有的reducers來(lái)設(shè)置它。
并且使用 react-redux 的 Provider 將 props 和 容器連接起來(lái)
??8气筋、redux中間件之redux-thunk
redux-thunk是dispatch到達(dá)reducer之前拆内，進(jìn)行一些額外的操作，如日志記錄宠默、創(chuàng)建崩潰報(bào)告麸恍、異步接口等
安裝redux-thunk? yarn add redux-thunk -D
在store目錄下index.ts,寫(xiě)入如下框內(nèi)代碼：
文章及代碼中如有問(wèn)題，歡迎指正搀矫，謝謝抹沪！
