iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

RRRR的世界 (Ruby on Rails + React + Redux)系列 第 24

Day 24, Redux Action / ActionCreator 根本是歸納法

今天呢,就先來定義Action

先歸納一下

看看我們的containers/ReadingList.jsx

class ReadingList extends React.Component {
    ...
    
    allBooks(bookAttributes){ ... }
    updateBook(bookAttributes, id) { ... }
    updateBookStatus(id, status) { ... }
    deleteBook(id) { ... }
    
    ...
}
ReadingList.propTypes = propTypes;
export default connect()(ReadingList);

歸納出我們需要那些Action:我們需要allBooks去載入book (LOAD_BOOKS),需要updateBook去確認修改或建立Book (UPDATE_BOOK),也需要deleteBook去刪除book (DELETE_BOOK),最後需要updateBookStatus 更新狀態(UPDATE_BOOK_STATUS)

這樣子 照本宣科!

好,所以先把actionTypes constant定義好:

import mirrorCreator from 'mirror-creator';                        
                                                                   
const actionTypes = mirrorCreator([                                
  'LOAD_BOOKs',                                                    
  'DELETE_BOOK',                                                   
  'UPDATE_BOOK',                                                   
  'UPDATE_BOOK_STATUS',                                            
]);                                                                
                                                                   
export default actionTypes;                                        

這樣子,我們就有四種action types可以用了。

接著,定義Action跟ActionCreator:

import actionTypes from '../constants/readingListConstants';

export function allBooks(books) {
  return {
    type: actionTypes.LOAD_BOOKS,
    books,
  };
}
export function updateBook(books){
  return {
    type: actionTypes.UPDATE_BOOK,
    books,
  };
}
export function updateBookStatus(books){
  return {
    type: actionTypes.UPDATE_BOOK_STATUS,
    books,
  };
}
export function deleteBook(books){
  return {
    type: actionTypes.DELETE_BOOK,
    books,
  };
}

今天的Action就建立完成了!
明天寫Reducer囉!!!


上一篇
Day 23, Redux 一樣先玩範例!
下一篇
Day 25, Redux Reducers - State管理大師
系列文
RRRR的世界 (Ruby on Rails + React + Redux)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言