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地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！