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));
    };
}

以上。

相关推荐
MrGaoGang15 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭29 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
用户76787977373229 分钟前
后端转全栈之Next.js后端及配置
react.js·next.js
码流之上31 分钟前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
跟橙姐学代码32 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom36 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌37 分钟前
Web3基础
前端
RoyLin40 分钟前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端