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

以上。

相关推荐
Aotman_37 分钟前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61438 分钟前
Web前端面试题(1)
前端·面试·职场和发展
EveryPossible38 分钟前
选择数据展示
javascript
lypzcgf42 分钟前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育1 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9492 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld2 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu2 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子2 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖2 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome