React@16.x(57)Redux@4.x(6)- 实现 bindActionCreators

目录

1,分析

一般情况下,action 并不是一个写死的对象,而是通过函数来获取。

bindActionCreators 的作用:为了更方便的使用创建 action 的函数 actionCreator

举例:

1,直接传入函数

js 复制代码
const createAddUserAction = (user) => ({
    type: ADD_USER,
    payload: user,
});

store.dispatch(createAddUserAction({ id: 3, name: "name3", age: 20 }));

相当于

js 复制代码
const addUser = bindActionCreators(createAddUserAction, store.dispatch);
addUser({ id: 3, name: "name3", age: 20 });

2,传入对象

js 复制代码
const actions = {
    addUser: createAddUserAction,
    updateUser: createUpdateUserAction,
    deleteUser: createDeleteUserAction,
};

store.dispatch(actions.addUser({ id: 3, name: "name3", age: 20 }));
store.dispatch(actions.updateUser(2, { name: "name22" }));
store.dispatch(actions.deleteUser(1));

相当于

js 复制代码
const bindAction = bindActionCreators(actions, store.dispatch);
bindAction.addUser({ id: 3, name: "name3", age: 20 });
bindAction.updateUser(2, { name: "name22" });
bindAction.deleteUser(1);

2,实现

js 复制代码
export const bindActionCreators = (actionCreators, dispatch) => {
    if (typeof actionCreators === "function") {
        return getAutoDispatchActionCreator(actionCreators, dispatch);
    } else if (typeof actionCreators === "object") {
        const res = {};
        for (const key in actionCreators) {
            if (Object.hasOwnProperty.call(actionCreators, key)) {
                const ac = actionCreators[key];
                if (typeof ac === "function") {
                    res[key] = getAutoDispatchActionCreator(ac, dispatch);
                }
            }
        }
        return res;
    } else {
        throw TypeError("actionCreators 必须是函数或对象");
    }
};

function getAutoDispatchActionCreator(actionCreator, dispatch) {
    return function (...args) {
        dispatch(actionCreator(...args));
    };
}

以上。

相关推荐
开开心心就好39 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享40 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js