# 關於處理 redirect 問題的心得

### 問題

當我把專案主畫面做出來之後，就需要讓使用者在登入頁面完成登入之後，可以跳轉到主頁面。

上次做專案的時候，並沒有用到 Redux, Redux Saga，是直接在 component 裡面處理 form submit, fetch api，然後根據結果用 `props.history.push()` 導向其他畫面。

但是這次當使用 Redux, Redux Saga 並把 fetch api, update data 的動作拆分在不同的地方，一瞬間突然不知道該怎麼做。

### 解決過程

於是我上網搜尋 "react, redux, redirect" 相關的內容，然後就開始找到許多不同的套件，像是
* react-router-redux
* redux-saga-router
* react-redux-saga-router

等等套件，以及相關的作法，嘗試之後都無法成功。更詭異的是，這些做法都有使用到 `history` 套件，但是完全找不到能夠正確引入 `history` 套件的方法。

就這樣試了半天之後，還是無法解決問題。於是，就決定自己回去用先前的作法：
* 用 useEffect 監聽 store 當中的使用者資料
* 若資料有改變，trigger useEffect 當中的 redirect function
* 這個 redirect function 會檢查是否有使用者的登入資訊，若有，則用 `props.history.push()` 導回主頁面；若無，則停留在原登入頁面。

### 心得

一開始為了處理這個問題，花了很多時間查詢各種不同的套件，想說現在應該會有比較好的作法。過程中發現有很多各種不同實作的方式與套件，但卻又無法成功執行。也發現覺得 React 技術進步很快，很多 2018 年的資訊，其實都不太能用了。結果最後是用最簡單的方式實作出來。

新工具出現的速度越來越快，網路上能找到的資訊也越來越多，也很容易不小心就查到過時的資訊。不過這些工具都只是表面，重點是要更瞭解當前使用的工具的運作原理，才能夠更了解問題可以如何被處理，或是找到正確的方向前進。