React.js 筆記 - Flux 的個人理解

  1. 1. 簡單介紹
  2. 2. 用 jQuery 當範例

banner

React.jsFlux 的部份我看了好久還是不太能理解他的意思,這幾天總算理出點頭緒(雖然不知道對不對…),在這邊做一點紀錄。

簡單介紹

Flux 算是一套前端的處理流程,一般的講法就是前端版的 MVC,主要分四大部份:

  • Action: 事件觸發或是跟後端溝通後,發送資料給 Dispatcher。
  • Dispatcher: 根據資料內容,分派至對應的函式做處理(通常是參照資料裡面的一個 type 屬性)。
  • Store: 儲存負責處理資料的函式,向 Dispatcher 註冊後,再由 Dispatcher 負責分發。
  • View: 接收處理後的結果並更新頁面。

這邊所指的資料在 React.js 裡叫作 state,當 state 更新之後 View 就會對頁面做相對應的更新。

用 jQuery 當範例

以點擊按鈕就新增一張卡片為例,一開始用 jQuery 寫時,大概會像下面這樣子:

1
2
3
4
5
6
7
$('#addCard').click(function() {
//- 新增數據
/* do something */

//- 生成 html 並放進網頁裡
/* do something */
});

隨著按鈕或其他元件的增加,要新增的事件也會變多,例如再增加一個刪除卡片:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#addCard').click(function() {
//- 新增數據
/* do something */

//- 生成 html 並放進網頁裡
/* do something */
});

$('#delCard').click(function() {
//- 處理要刪除的數據
/* do something */

//- 刪除卡片的 html 部份
/* do something */
});

開發的時間久了之後,你可能會開始想要把 function 拆出來,並給予有意義的名字,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$('#addCard').click(addCard);
$('#delCard').click(delCard);

/* 或是 */

$('#addCard').click(function() {
addCard(/* 額外的參數 */);
});

$('#delCard').click(function() {
delCard(/* 額外的參數 */);
});

function addCard() {
//- 新增數據
/* do something */

//- 生成 html 並放進網頁裡
/* do something */
}

function delCard() {
//- 處理要刪除的數據
/* do something */

//- 刪除卡片的 html 部份
/* do something */
}

本著 function 只處理一件事的精神,我們把更新頁面(View)的部份拆回來:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('#addCard').click(function() {
const data = addCard(/* 額外的參數 */);

//- 生成 html 並放進網頁裡
/* do something */
});

$('#delCard').click(function() {
const data = delCard(/* 額外的參數 */);

//- 刪除卡片的 html 部份
/* do something */
});

function addCard() {
//- 新增數據
/* do something */
}

function delCard() {
//- 處理要刪除的數據
/* do something */
}

之後可能會想統整起來,改由一個 handler 之類的負責分派:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$('#addCard').click(function() {
const data = CardHandler({
type: 'ADD_CARD',
/* 額外的參數 */
});

//- 生成 html 並放進網頁裡
/* do something */
});

$('#delCard').click(function() {
const data = CardHandler({
type: 'DEL_CARD',
/* 額外的參數 */
});

//- 刪除卡片的 html 部份
/* do something */
});

function CardHandler(action) {
switch(action.type) {
case 'ADD_CARD':
//- 新增數據
/* do something */
break;
case 'DEL_CARD':
//- 處理要刪除的數據
/* do something */
break;
}
}

那整個 Flux 的流程,用很籠統的圖解大概是這樣:

Flux

Store 就是儲存事件所對應的工作,Dispatcher 負責分發;而 Redux 在此之上額外拆出了 Reducer,但基本流程不變。