合并reducer

reducer工程化第一步:合并

各个模块下reducer的模板:
在这里插入图片描述
1.@符是代表直接从src下面进行寻找
2.定义初始状态
3.深拷贝状态
4.进行行为判断

votereducer这么写?在这里插入图片描述

合并reducer

在这里插入图片描述

导出总的reducer

在这里插入图片描述

模块化开发后往事件池放的更新方法,在disptch的时候,每次都要把事件池里面的所有事件都执行一遍,可不可以优化事件池里面的更新方法只需要执行指定的更新方法吗??

可以通过在事件池中维护一个注册表来优化事件的触发。具体而言,我们可以在注册表中存储事件名与对应的回调函数之间的映射关系,并在触发事件时只执行对应的回调函数。

下面是一种实现方法的示例代码:

// 注册表,存储事件名与回调函数的映射
const listeners = {};

// 注册事件监听器
function addListener(eventName, callback) {
  if (!listeners[eventName]) {
    listeners[eventName] = [];
  }
  listeners[eventName].push(callback);
}

// 触发事件,只执行注册表中对应的回调函数
function dispatch(eventName, payload) {
  const callbacks = listeners[eventName] || [];
  callbacks.forEach(callback => callback(payload));
}

对于应用中的每个事件,我们可以通过addListener方法将其注册到事件池中,例如:

addListener('updateUser', (payload) => {
  console.log('updated user:', payload);
});

这样,在调用dispatch方法时,只会执行updateUser事件对应的回调函数而不是全部事件的回调函数。例如:

dispatch('updateUser', { name: 'Alice', age: 30 });
// 输出:updated user: { name: 'Alice', age: 30 }

这样的优化可以有效减少不必要的回调函数执行,提高应用性能。

这种优化需要对原有的事件触发机制进行修改,因此需要修改源码。实现起来也比较容易,只需要在dispatch方法中增加一个注册表,将事件名和回调函数一一对应起来,而不是在触发事件时遍历所有事件的回调函数。

当然,Redux 源码中已经有现成的实现,该实现叫做 reduce-reducers,它提供了一个 enhanceReducer 函数,可以将多个 Reducer 函数合并成单个 Reducer。在应用程序的状态更新时,只有与当前 Action 相关的 Reducer 函数才会得到调用,这样可以避免无意义的更新操作,提高性能。

如果你使用 Redux,可以考虑使用 reduce-reducers 或者 Redux Toolkit 提供的 createSlice 函数来实现这一优化。


第二步:每一次dispatch派发的时候,都会去每个模块的reducer中找一遍,把所有和派发行为标识匹配的逻辑执行!!

可能存在的问题:团队协作开发的时候,因为开发的人多,最后很可能派发的行为标识会有冲突!!

所以我们一定要保证,不管哪个模块,哪个组件,我们派发的行为标识,必须是唯一的!!基于“宏管理(统一管理)”,让所有派发的行为标识,唯一性!!!

在这里插入图片描述

reducer中怎么修改:

在这里插入图片描述


第三步:actionCreator的创建:把派发的对象进行模块管理:

在这里插入图片描述

再把action合并成一个action:

在这里插入图片描述

修改reducers中:

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值