iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
1
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 12

【DAY 12】利用Redux發射愛的Action吧

  • 分享至 

  • xImage
  •  

【前言】
  最近加班都到好晚,工作上一切都好不順利(暈,每天希望自己不要扯後腿,但好像都瘋狂在扯後腿,對前輩整個很不好意思......嗚嗚嗚。但還是要得抽時間繼續努力!!

【正文】
  昨天說到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


上一篇
【DAY 11】Redux不是小三!它只是和ReactJS較契合!
下一篇
【DAY 13】對方聽不懂?那就讓Reducer來幫你一把吧!
系列文
請你當我的好朋友吧!ReactJS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言