【前言】
最近加班都到好晚,工作上一切都好不順利(暈,每天希望自己不要扯後腿,但好像都瘋狂在扯後腿,對前輩整個很不好意思......嗚嗚嗚。但還是要得抽時間繼續努力!!
【正文】
昨天說到Redux的特色,以及Redux的週期是怎麼樣運作的,那今天就來說說三劍客之一--「Action」。
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using
store.dispatch()
.
Redux所謂的action其實就是記錄著你要送什麼樣的變動到store中的payload(數據體)。而這些action必須要透過dispatch()
發送這些actions到store。
而Action本身是什麼呢?我們直接來看一個範例吧!
// action type
// 此為action類別,通常我們設定為常數,並且都是以大寫表示
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
// 其他常數
export const VisibilityFilters = {
SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE',
};
// action creator
// 這是action creator,是產生action物件的function
export const addTodo = (text) => ({
// type屬性一定要有
type: ADD_TODO,
content: text,
});
export const toggleTodo = (index) => ({
type: TOGGLE_TODO,
index,
});
export const setVisibilityFilter = (filter) => ({
type: SET_VISIBILITY_FILTER,
filter,
});
從上面例子可以看到我們宣告了一個常數和一個function,常數部分是所謂的action type,即action的類別
,而下面的function是action creator,是產生action物件
的方法,而每個action物件至少必含type
屬性,即action類別
為何。
所以今天如果我們要發送一個action給store要怎麼做呢?利用dispatch()
發送吧!
dispatch(addTodo(text))
這樣有比較明白action的作用了嗎?呵呵,那我們明天來說說reducer
是什麼吧!順便祈禱我明天工作順利QQ