近半年前的我剛碰到 redux 的時候，卡關卡很久，看 RTK 的官方教學看不懂，就在網上找到了原作者的教學，那陣子正在找工作，因為沒有就業，體感時間流速慢(?)，就慢慢的看，對當時的我而言 redux 並不是很好懂的東西。
第一次學 redux 就是跌倒，各種花式摔，遍尋不著真的能讓自己「看懂」的教學，每天都過得很痛苦。
雖然看得懂原作者想要表達的意思，但最後因為怎麼樣都用不上，自暴自棄的從 redux 的官方教學的第一頁開始看，這個方式就是最花時間，成效不一定有，因為會看到很多舊的寫法，已棄用的方式，我完全無視那些棄用警告，一字一句的看，一行程式碼一行程式碼的寫，當時真的連自己的人生都快放棄了，浪費一點點時間也只是小事，現在回想起來，這說不定是最適合當時那個自己的方法 XD
現在的我也不再會有機會再用那樣的方式學東西了，就只是一個生命過程，走過就是了。
我覺得對我而言幫助最大的關鍵概念就是這一句 :redux 不是套件，而是一種設計模式。
了解這件事之後，我從「正在學習套件」的想法跳脫，變成我在學習一種設計模式，也是因為這樣，我的腦海開始對「軟體設計模式」這件事有個影子。
這樣，可以來複習或認識一下 MVC 架構 :
與 Redux 架構圖做個對造 :
GIF
MVC 架構在 react 中視這樣去呈現的，這是前端的 MVC :
function Counter() {
// State: 計數器
const [counter, setCounter] = useState(0)
// Action: 有什麼事發生的時候更新 state
const increment = () => {
setCounter(prevCounter => prevCounter + 1)
}
// View
return (
<div>
Value: {counter} <button onClick={increment}>Increment</button>
</div>
)
}
所有的 state 都在 store 中集中管理，store 裡面有很多 reducer，要改變 store 裡面的 state ，必須要用 reduce 裡面的 action 但要用 action 做事要透過 store 來做 dispatch！
來個生活化的例子吧！
社團租場地，並不是學生先跑去那個地點就算是租到場地，要透過一些程序才可以。
租場地的流程如下
課指組是 store 場地就是 state ，我們要租場地要透過課指組來指派。
這其中的 reducer 是什麼呢？reducer 其實是租借場地這件事情，課指組不只管租借場地，還管社團活動的經費申請，這又是另一個 reducer，這時候我們就知道一件事，每一組 reducer 都代表著一種功能，裡面的 state 當然就是跟這組功能有關的 state。
要在 redux 中改變狀態，只能使用 store 的 dispatch 做 action，而 Selectors 是用於提取 store state 的方法。
在那段我一頁一頁看的時光裡面，我照著寫了當時已經不備推薦的connect()，我最大的收穫就是第一次知道了 react 中的高階元件 (HOC) 這種設計模式。
使用 redux 會產生大量的模板程式碼，這是為了要呈現這種設計模式所會出現的一種惱人現象，現在 RTK 已經減少了很多模板程式碼，但我們在使用的時候還是難免覺得很多，但如果去回朔 redux 的這段演進歷史，就會發現他已經進步蠻多的了。
從我開始能夠在專案中用 Redux Toolkit的時候，才真正的覺得學的東西有用處，也是我學習寫程式之後，跨過的一個思想的分水嶺，我接受那種卡住的感覺，也學會在卡住的時候如何找回彈性的思考。
從明天開始我會繼續推進專案，並且嘗試在專案中導入 Redux Toolkit。
iThome鐵人賽
看影片追技術