Redux-actions框架之createAction()與handleActions() 用法講解

redux-actions

redux-actions框架提供了兩個經常使用的API函數

• createAction()
• handleActions()

createAction()

• createAction() 從函數名就能夠看出，是用來建立Action的
• 普通方式建立的Action對象

const CounterAction = {
  increase() {
    return {
      type: Constants.INCREASE
    }
  },

  decrease() {
    return {
      type: Constants.DECREASE
    }
  }
}
複製代碼

• 使用redux-actions 提供的createAction 函數建立的Action

/**
 * Created by guangqiang on 2017/9/6.
 */
import {createAction} from 'redux-actions'
import type from '../../constants/actionType'
import actions from '../../actionCreators/movie'

const getMovieList = createAction(type.MOVIE_LIST, actions.movieList)
const getMovieListForDemo = createAction(type.MOVIE_LIST, actions.movieListForDemo)
const getMovieDetail = createAction(type.MOVIE_DETAIL, actions.movieDetail)
const getMovieStory = createAction(type.MOVIE_STORY, actions.movieStory)
const getMovieShowTimeList = createAction(type.MOVIE_SHOWTIME_LIST, actions.movieShowTimeList)
const getMovieComeingNewList = createAction(type.MOVIE_COMEING_NEW_LIST, actions.movieComeingNewList)
const getMovieComment = createAction(type.MOVIE_COMMENT_LIST, actions.movieCommentList)
const getMiniComment = createAction(type.MOVIE_MINI_COMMENT, actions.movieMiniCommentList)
const getPlusComment = createAction(type.MOVIE_PLUS_COMMENT, actions.moviePlusCommentList)
const getTrailerList = createAction(type.MOVIE_TRAILER_LIST, actions.movieTrailerList)
const getActorList = createAction(type.MOVIE_ACTOR_LIST, actions.movieActorList)
const getPictureList = createAction(type.MOVIE_PICTURE_LIST, actions.moviePictureList)

const actionCreators = {
  getMovieList: params => getMovieList(params),
  getMovieDetail,
  getMovieStory,
  getMovieListForDemo,
  getMovieShowTimeList,
  getMovieComeingNewList,
  getMovieComment,
  getMiniComment,
  getPlusComment,
  getTrailerList,
  getActorList,
  getPictureList,
}

export default {actionCreators}
複製代碼

源碼

/**
 2  * 參數不是function調用此函數
 3  */
 4 function identity(t) {
 5   return t;
 6 }
 7 
 8 /**
 9  * 建立action
10  * @param type  action的類型
11  * @param actionCreator 須要建立的action,函數
12  * @param metaCreator   action的屬性
13  * @returns {Function}
14  */
15 export default function createAction(type, actionCreator, metaCreator) {
16     /**
17     * finalActionCreator最終建立的action,
18     * 判斷傳進來的參數是否是function,true返回這個函數,false調用identity函數
19     */
20   const finalActionCreator = typeof actionCreator === 'function'
21     ? actionCreator
22     : identity;
23   /**
24    * 返回一個匿名函數
25    */
26   return (...args) => {
27     /**
28      *建立的action,只有兩個屬性
29      */
30     const action = {
31       type,
32       payload: finalActionCreator(...args)
33     };
34     /**
35      * 若是給匿名函數傳遞參數的長度爲1個,或者第一個參數元素的類型爲Error,那麼這麼action的error屬性爲true
36      */
37     if (args.length === 1 && args[0] instanceof Error) {
38       // Handle FSA errors where the payload is an Error object. Set error.
39       action.error = true;
40     }
41     /**
42      * 傳遞到action裏面的函數
43      */
44     if (typeof metaCreator === 'function') {
45       action.meta = metaCreator(...args);
46     }
47 
48     return action;
49   };
50 }
複製代碼

handleActions()

• redux框架下的reducer操做state，主要使用switch或if else來匹配

const defaultState = 10

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case Constants.INCREASE:
      return state + 1
    case Constants.DECREASE:
      return state - 1
    default:
      return state
  }
}
複製代碼

• 使用redux-actions框架提供的handleActions() 來處理reducer

import type from '../../constants/actionType'
import {handleActions} from 'redux-actions'

const initialState = {
  movieDetail: {},
  commentData: {}
}

const actions = {}

actions[type.MOVIE_DETAIL + type.FETCH_SUCCESS_SUFFIX] = (state, action) => {
  return {
    ...state,
    movieDetail: action.payload.data
  }
}

actions[type.MOVIE_COMMENT_LIST + type.FETCH_SUCCESS_SUFFIX] = (state, action) => {
  return {
    ...state,
    commentData: action.payload.data
  }
}

const reducer = handleActions(actions, initialState)

export default reducer
複製代碼

更多文章

• 做者React Native開源項目OneM【500+ star】地址(按照企業開發標準搭建框架完成開發的)：github.com/guangqiang-…：歡迎小夥伴們 star
• 做者簡書主頁：包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們：多多關注，多多點贊
• 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習
• 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流羣（620792950），在羣裏提問、互相交流學習。交流羣也按期更新最新的RN學習資料給你們，謝謝你們支持！

小夥伴們掃下方二維碼加入RN技術交流QQ羣