下方的圖為作者 Dan 教學時用的 web, 畫面上是一個簡單計數器, 右半邊為瀏覽器看到的 web, 左半邊為 console

redux-tutorial-1-2

第一件事, status 是什麼?

不論你是想要寫一個跟作者 Dan 一樣的簡單計數器, 還是一個複雜 UI 與邏輯交雜的 webApp, 你的 status ( redux 中用來紀錄整個狀態 ) 會以 一個 javascript object ( json ) 來表示

以上的描述表示 整個程式的狀態是可被追蹤的

範例1 ( 超簡單的 state 展示 )

舉例來說, Dan 現在可以在 console 上看到 每個 state 的改變
redux-tutorial-1-1

然而畫面上並沒有太多的 state 可以被追蹤, 所以目前的(計數器的) state 可以用一個 javascript number 來表示 ( 都還不用包成很複雜的物件 )
redux-tutorial-1-2

範例2 ( 稍稍複雜的 state )

以下是另外一個範例, 目前畫面上有許多獨立的計數器, 這些計數器的個數可以增加(Add)以及減少(Remove)
redux-tutorial-1-3

以目前來說, 一個 number 所構成的 state 已經無法反映場面上的狀態了, 因此我們使用 array 來紀錄
redux-tutorial-1-4

上面這兩個範例展示了 redux 的 state 隨時反映整個 webApp 的狀態會隨著開發的腳步以及功能的增加而擴充

範例3 ( 一張 TODO list )

以下這張 TODO list 提供了幾個功能

  • Add TODOs ( 新增TODOs )
  • Cross TODOs ( 把TODOs 畫一條橫槓, 也就是完成 )
  • Filter ( 點選 All 看全部 TODOs, 點選 Completed 看已經完成的, Active 為活躍中尚未完成的 )
    redux-tutorial-1-5

Dan 並沒有要提實作細節, 他只是想藉由功能較複雜的操作傳達 redux 的精神

當我們觀察 state 改變的過程( history ) 我們可以觀察出整個 webApp 的操作以及改變過程

注意: 下方圖片的左邊的 console 為操作過好幾次產生的 console.log, 不代表右邊 UI 當下的狀態 ( 簡單來說就是看左邊就好不要管右邊 )

Initial javascript object

  • todo 是一個空陣列
  • visibilityFilter: “SHOW_ALL”
    redux-tutorial-1-6

操作: 新增一個TODO

  • todos array 新增了一個 todo 在內
    redux-tutorial-1-7

操作: 按下 Completed

  • visibilityFilter: “SHOW_COMPLETED”
    redux-tutorial-1-7

First principle of Redux

Every that changes in your application included the data and UI state is contained in a single object we called the state or the state tree

任何 app 中的改變, 從 data 到 UI 都可以被記錄在一個 json 內, 我們稱之為 state 或 state tree

參考資料