大家好，今天的篇章要介紹的是 Redux + React + TypeScript

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day11-react-router

Redux

簡單說，redux 用來管理你的全域變數，不過得遵照他的設計模式來使用

用筆者可能太主觀的說法就是，能夠有一堆 reducer，每一個 reducer 都配有各自的改變自己數據的操作集 actions，一堆 reducer 都會放在 store 集中管理起來

然後是遇到了 react，就得用 react-redux 這個函式庫，它能幫你架好 react component 以及 redux store 之間溝通的橋樑，你就可以在任何一個 component 中驅動 reducer 的數據，只要是有掛起並使用到這個 reducer 的任何一個 component，都會自動幫你 rerender 來改變畫面呈現

以下程式碼為參考這 https://redux.js.org/recipes/usage-with-typescript 來改寫

就開始建立程式碼吧，這一篇章我們又會請到萬用的 Counter 來實作，首先要先安裝起來

npm i redux
npm i react-redux
npm i -D @types/react-redux

待會會將以下的 component 內的 state 給改寫到 redux 的 reducer 中

先建立 reducer 來放這個 count 吧！

+ src/reducers/count/count.ts

就這樣，定義了一個初始值是 0，回傳 number 型別的函數，它就是 useState 之中的 count 了

接下來是為了要讓 react 可以使用它，要先整合 reducer 到 store 之中

+ src/reducers/configureStore.ts

這裡引入了剛剛的 reducer 以及一些 redux 建構 store 的函數，combineReducers() 就是放所有 reducer 的地方啦！要注意到的是得取名為你一眼就能好認得的名字，然後是 createStore() 回傳的就是最後最後的 store，這邊還有定義強型別 reducer 名稱控管的 storeTypes，後續使用到的時後會再提及

然後就是把 store 給掛進 Root.tsx

27 ~ 29 行，掛在 Root 就是為了讓底下所有的 component 都能去存取 store 內的 reducer

再來就是來改寫萬用的 Counter 啦

+ src/components/day12/Counter/Counter.tsx

react-redux 提供了一個 hook，useSelector，直接把 countReducer 拿出來用即可，同場加映強型別的 storeTypes，它會讓 state . 出你一眼就能好認得的名字

要先改一下 Router.tsx 來引入這個 Counter.tsx 看看結果，痾 ... 上一章好像對 Router.tsx 做的東西有點多，好！那換一下，暫時放在 Root.tsx 上吧！component 就是這麼靈活可以隨便找地方亂放沒問題（硬要）

暫時借放用完會還位置給你

執行結果

就能正確取得 countReducer 的預設值 0 了！

然後 Counter.tsx 之中還有 setCount 還沒有轉換成可以驅動 reducer 數據的方式，也就是 actions，接下來要將 setCount 給改寫到 redux 的 actions 中

+ src/actions/count/count.ts

不要懷疑！就是得寫這麼多，雖然只是要做一個 setCount 的 action，就是要定義這些強型別才能嚴謹對待這些全域變數操作，而且它們跟 reducer 之中的 switch 也是有特別的妙用的，接下來還要改寫 reducer ～

先貼一下剛剛提到的 switch 與 type 包裝 interface 的特別妙用，可以參考這裡 https://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions

接下來就是要讓 button 掛上 dispatch action 的函數

這邊就是利用 useDispatch() 的 dispatch 來傳進 action 的動作，這是 redux 強烈要求的改動數據方式，試想未來專案內需要全域來管理的 reducers 越來越多，actions 也越來越多時，這些撰寫規範都能幫助你有效且妥善的管理這些操作

執行結果

這樣就大功告成啦～！以上就是筆者在使用 typescript + Redux 的一點小小小心得

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day12-typescript-redux

明天會繼續介紹 redux 與 typescript 一個實用的 loading 效果，以及要改寫 React Router 篇章提到的登入驗證！