Redux-实现bindActionCreators

最近在读Redux源码,现将自己实现的代码和理解贴上,后期再补充详细~

为了方便利用action创建函数来分发(触发)action,redux提供了一个函数bindActionCreators。该函数用于增强action创建函数的功能,使它不仅可以创建action,并且创建后会自动完成分发。

bindActionCreators,接受两个参数:actionCreators、dispatch。

dispatch会被传递,每次调用action都会执行一次。

actionCreators需区分对象和函数类型,做不同的处理。

简单的说是返回一个对象,每个key对应一个函数,这个函数运行时会调用action生成函数,然后再调用一下dispatch,简化了操作。

/**
 * 
 * @param {*} actionCreators action生成器
 * @param {*} dispatch 
 */
export function bindActionCreators(actionCreators, dispatch) {
    // 如果是函数则直接返回
    if (typeof actionCreators === 'function') {
        return getAutoDispatchActionCreator(actionCreators, dispatch)
    } else if (typeof actionCreators === "object") {
        const result = {}; //返回结果
        for (const key in actionCreators) {
            if (actionCreators.hasOwnProperty(key)) {
                const actionCreator = actionCreators[key];
                if (typeof actionCreator === 'function') {
                    result[key] = getAutoDispatchActionCreator(actionCreator, dispatch);
                } 
            }
        };
        return result;
    } else {
        throw new TypeError("actionCreators must be an object or function which means action creator")
    }
}

// 进行抽象,本质是使用action生成器,生成一个action,并调用dispatch触发
function getAutoDispatchActionCreator(actionCreator, dispatch) {
    return function (...args) {
        const action = actionCreator(...args)
        dispatch(action);
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值