大家好，今天的篇章要介紹的是昨天的 redux-observable

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

redux-observable

昨天的文章內容有提到 redux-observable 能讓 Redux 有非同步操作、臨時取消亦或是直接執行 side effect 的功能，也展示了用 delay 延遲發送，以及用 filter 來過濾發送的條件，今天是想要來實作更具體的 Axios 發送情境

+ src/actions/fetchGithubUser/fetchGithubUser.ts

在fetchUserEpic 裡，將 Axios 給用 from 包了起來，這是為了要把 Promise 轉成 Observable

+ src/reducers/fetchGithubUser/fetchGithubUser.ts

reducer 的 action.type 遇到 FETCH_USER_FILFILLED 時會填回 ajax 取回的資料

調整 configureStore.ts

將 Epic 掛進去

接下來新增 component 來使用

+ src/components/fetchGithubUser/fetchGithubUser.tsx

執行 fetchUser 的按鈕，接到值會填進 textarea

然後加進 storybook

+ src/components/fetchGithubUser/FetchGithubUser.stories.tsx

執行結果

用 Epic 就能在 redux 之中取得非同步的資料

再來是中斷 ajax 請求，也是一樣使用 RxJS 的操作集來達成

修改 src/actions/fetchGithubUser/fetchGithubUser.ts

這裡新增了一個 action，fetchUserCancelled

再來是在 from(Axios) 底下使用 takeUntil(action$.pipe(ofType(FETCH_USER_CANCELLED)))，這句是指，這個 Observable 在執行非同步指令或 delay 時只要遇到 FETCH_USER_CANCELLED 就會停止

調整 FetchGithubUser.tsx

新增一個 dispatch Cancel 的按鈕

執行結果

可以用 cancel 按鈕來擋住 ajax 發送回來的動作

這樣感覺還不夠明顯的看出讀取中的狀態，就來新增個對應 ajax 發送的狀態 reducer

isFetchingGithubUserReducer 依照傳進的 type 來顯示狀態

src/actions/fetchGithubUser/fetchGithubUser.ts

fetchGithubUserActionTypes 要補上 cancel 的 interface

調整 configureStore.ts

將狀態掛在 component 上

執行結果

以上就是筆者在使用 redux-observable 來針對 ajax 進行中斷的小小心得

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

明天沒意外的話是要介紹 Jest，要進到測試的世界了！