redux精简代码之--actionType与redux-action-utils

@youngwind 2015-12-19 05:14:34发表于 youngwind/blog React

前言

用过redux的人都知道,action和actionType中都存在大量的重复代码。
(没有了解过redux的请移步这里


精简actionType

actionType是定义action常量的地方,一般长这个样。

exports.ADD_TAG = 'ADD_TAG';
exports.SELECT_REDDIT = 'SELECT_REDDIT';
exports.INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';
exports.REQUEST_POSTS = 'REQUEST_POSTS';
exports.RECEIVE_POSTS = 'RECEIVE_POSTS';

使用keymirror之后变成这样。

var keyMirror = require('keymirror');
module.exports = keyMirror({
  ADD_TAG: null,
  SELECT_REDDIT: null,
  INVALIDATE_REDDIT: null,
  REQUEST_POSTS: null,
  RECEIVE_POSTS: null,
});

精简部分action

action是定义action返回数据的地方,有很多函数会长下面这个样。(当然,像那些异步请求那么复杂的除外)

exports.addTag = function (state) {
  return {
    type: types.ADD_TAG,
    state: state
  }
};
exports.selectReddit = function (reddit) {
  return {
    type: types.SELECT_REDDIT,
    reddit: reddit
  }
};

使用redux-action-utils之后长这个样。

var {actionCreator, optionsActionCreator}= require('redux-action-utils');
exports.addTag = actionCreator(types.ADD_TAG, 'state');
exports.selectReddit = actionCreator(types.SELECT_REDDIT, 'reddit');