題外話一下XD
最近的武漢肺炎實在是太猖狂了
在今天早上得知中國竟然連北京都淪陷了，進而封城了，這武漢肺炎真的是很母湯！！(中國北京封城)
因為武漢肺炎的關係，全台掀起了一波口罩之亂，也在上週口罩實名制於2/6上路，衛生福利部中央健康保險署提供健保特約機構口罩剩餘數量明細清單開放資料給民眾查詢各特約藥局的口罩剩餘數量，我也接到了Boss的小任務 - 實作口罩查詢頁面，所以接下來兩週可能會到副線打怪一下，完成這個小任務。

才開始第二週就已經偏離主題XD

以下會稍微介紹一下我自己對於這個小任務的規劃（因為只是練習，所以Boss讓我自由發揮）

任務功能

• 可以依照使用者目前位置來查詢附近特約藥局（定位）
• 亦可透過輸入地址進行查找特約藥局（輸入查詢）
• 將附近特約藥局顯示在地圖上（顯示地圖）
• 在地圖上顯示各特約藥局口罩剩餘數量以及特約藥局相關資訊（顯示特約藥局資訊）

使用技術

• React
• react-redux
• redux-observable
• typescript（考慮加入，因為還在摸索observable，所以不敢一次亂加太多東西XD）

因為我目前在學習React前端框架，所以這次的任務也會採用React框架來完成，但還是以紀錄observable為主，也可能會添加在這任務練習中學到的新技術！
但這篇文章較偏向我本身的實作筆記，所以可能會依照本身喜好去紀錄較多，比較不偏向教學文，不過我還是會盡量將這份筆記寫的完整些，也方便以後自己再次查看！

知識需求

這邊會提供一些筆者我本身所學習這些技術時所觀看的一些學習資源，如下：

• React、Redux
  快速學習 React.js 和 Redux 的基礎到實踐學習（網址）
  這個課程是公司的學習資源，來自於Udemy學習網。
  Udemy上真的有非常多的線上課程可以學習，但是需要比較有自制力，因為常常買了課程之後都想說是無限期的就放著放著就忘了，還是只有我會這樣XD

• RxJS
  30天精通 RxJS（網址）
  作者寫得非常清楚，在一開始接觸Observable文件時常常到處碰壁，後來看了這位大神寫的30天精通RxJS教學文後，再回去看Observable文件，就發現有比較好懂一些，到現在還是會時常看這一系列文章來加深對Observable方法的理解。

• Redux-Observable
  Redux-Observable官網（網址）
  TypeScript + React + 雜七雜八 - Day22（網址）
  Observable系列我比較沒有看到系列文章的教學，都是些較零散地教學文這樣！

Not familiar with Observables/RxJS v5?
redux-observable requires an understanding of Observables with RxJS v5. If you're new to Reactive Programming with RxJS v5, head over to http://reactivex.io/rxjs/ to familiarize yourself first.
redux-observable (because of RxJS) truly shines the most for complex async/side effects. If you're not already comfortable with RxJS you might consider using redux-thunk for simple side effects and then use redux-observable for the complex stuff. That way you can remain productive and learn RxJS as you go. redux-thunk is much simpler to learn and use, but that also means it's far less powerful. Of course, if you already love Rx like we do, you will probably use it for everything!

不熟悉Observables / RxJS v5？
進入redux-observable之前需要理解RxJS v5的Observables。如果你是用RxJS v5進行響應式編程的新手，轉向http://reactivex.io/rxjs/先熟悉下。
如果您對RxJS感到不太舒適，你可以考慮使用redux-thunk處理簡單邏輯，然後使用redux-observable處理複雜情況。這樣既可以保持質量又可以學習RxJS。redux-thunk學習和使用起來更簡單，這也意味著它遠沒有那麼強大。所以，如果你已經和我們一樣喜愛Rx，你可能會用它來做每一件事情。

這是一段來自Redux-Observable官網的建議，初學者如果覺得Observable過於困難是可以先使用redux-thunk來實作，在剛開始接觸Observable時我也曾被建議可以先使用redux-thunk，但勇於挑戰的我還是決定直接挑戰Observable

• Functional Programming
  30天快樂學習 Functional Programming （網址）
  Functional Programming可以讓程式的可讀性提高，在開發上也更加便利。

具備以上相關知識後，便可以開始實作哩！
下篇文章就會step by step的紀錄如何在React使用Redux-Observable，敬請期待！

問題與討論

我也是前端的小菜鳥，所以要是有什麼寫得不好的地方，大師路過還請多給我一些指點，也請各位大師鞭小力點XD
如果你/妳已經是在前端上有一兩年經驗的，因本系列文章偏向前端入門，可能本系列文章不太適合你/妳，但也歡迎你/妳給予一些建議。