淺談 Redux:狀態管理是一門學問


在認識 Redux 之前

從過去到現在,關於「狀態管理」,不同的前端框架有不一樣的處理方式:

  • jQuery:資料與畫面分離,重點放在「畫面」上。若需要資料,必須要從畫面上把資料拿回來。
  • Vue & Angular:資料與畫面「雙向綁定」。
  • React:關注在「資料」的變動,透過 state 變動來渲染畫面。

Flux 簡單介紹

Facabook 當時會提出 React 和 Flux 就是要解決當 App 架構越變越大,功能變更複雜時所遇到的問題。舉例 FB Messenger 通知,程式碼中會有很多部分會操控到管理通知的 Model,使得難以回溯追蹤。

在 Flux 的架構之下,想要改變 View(畫面)或是 Data(資料),都需要發出 Action 指令,由 Dispatcher 統一變動 Store,再把更動好的值,傳回 View。
flux data flow

在小型的專案裡面卻顯得多此一舉,直接透過修改 Store 去更動 View 即可;但在大型專案中,透過這樣的「集中」管理方式,會比較好進行「狀態管理」。

Redux 是什麼?

Redux 是一個「用於 JavaScript 應用程式的狀態管理工具」,用來實現「狀態管理機制」的套件。

提示重點:

  1. 不直接更動 store 裡面的資料,而是透過 dispatch 發送一個 Action(物件)又稱為指令,經過 Store 來改變。
  2. ReducerArray.prototype.reduce() 相似,會有現在的狀態跟元素,透過 reduce() 會返回新的狀態跟元素。

Redux 實際操作

React 和 Redux 兩者可以獨立操作,並無相依性。兩者都可以進行狀態管理。

  • React:把 state 放在 component 裡面。
  • Redux:把 state 放在 Store 裡面,而 Store 是一個物件。

React + Redux:我們來實作簡易的 pagelist

首先,確立資料夾結構,先開設一個 Redux 資料夾,把所有相關的檔案放進裡面
資料夾

  • /reducers (資料夾)
    • pages.js
    • index.js
  • actionTypes.js
  • actions.js
  • store.js
  • selectors.js

actionTypes.js

import { createStore } from "redux";
import rootReducer from "./reducers"

export default createStore(rootReducer);

actionTypes.js

export const ADD_PAGE = "add_page";
export const DELETE_PAGE = "delete_page";
export const EDIT_PAGE = "edit_page";







Related Posts

別猶豫了,來修 CS50 吧!

別猶豫了,來修 CS50 吧!

利用 Elm 製作 Chrome Extension

利用 Elm 製作 Chrome Extension

[Oracle SQL Debug] 解決ORA-01489的問題

[Oracle SQL Debug] 解決ORA-01489的問題






Comments