我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

reduxextraReducers监控方法中,有addCase()addMatcher()还有addDefaultCase(),本文讲述最后一个addDefaultCase()的使用方法。

苏南大叔:redux教程,如何使用addDefaultCase添加默认系统监听? - adddefaultcase
redux教程,如何使用addDefaultCase添加默认系统监听?(图4-1)

大家好,这里是京城非著名互联网从业人员苏南大叔的博客,这里记录一系列神奇的代码故事。本文描述redux技术中的addDefaultCase()。测试环境:win10node@16.14.2create-react-app@5.0.1reduxjs/toolkit@1.8.3react-redux@8.0.2chrome@103.0.5060.53redux-devtools-extension@3.0.11

三种监听

函数名条件同组可执行不同组可执行
addCase()type零次或一次多组多次,每组最多一次
addMatcher()自定义条件零次或多次多组多次,每组可执行多次
addDefaultCase()其它匹配不到的时候零次或一次多组多次,每组最多一次
  • addCase()这组最多被执行一次。
  • addMatcher()这组可以被执行很多次,和addCase()没有任何瓜葛,相互不影响执行。
  • addDefaultCase()是在前两者都没有被匹配到的情况下,才会被执行。可以用于拦截未知的action

测试代码:

export const a1=createAction("aa/bb")
export const husband = createSlice({
  name: 'husband',
  initialState :{
    unknown:[],
  },
  reducers: {
  },
  extraReducers: (builder) => {
    builder
      .addCase(a1,(state,action)=>{
        console.log("addCase");
      })
      .addMatcher(isAllOf(a1),(state,action)=>{
        console.log("addMatcher_isAllOf");
      })
      .addDefaultCase((state,action)=>{
        console.log("default case",state,action.type);
        state.unknown.push(action.type);
      });
  },
});

苏南大叔:redux教程,如何使用addDefaultCase添加默认系统监听? - 测试代码
redux教程,如何使用addDefaultCase添加默认系统监听?(图4-2)

addCase()

addCase(),以action.type为标准,监控普通的action事件以及asyncThunkAction事件。参考文章:

addMatcher()

addMatcher(),监控的标准是自定义的。而且可以多次重叠触发,监控各种action事件。参考文章:

addDefaultCase()

addDefaultCase(),这个是默认的分支。如果没有被addCase()拦截,也没有匹配到addMatcher()的话,就会走这个addDefaultCase()分支。

按照顺序摆放,addDefaultCase()必须放到最后,并且因为是default,所以该函数没有条件,只有执行函数部分。

addDefaultCase()特例

addDefaultCase()特例,因为可以用于拦截未知的action。所以,拦截到了三个未知动作。然后把这三个动作保存到state里面,却只保存到了一个内容。所以,苏南大叔觉得,可能是在@@INIT的时候,可能会有个清库的过程,仅猜测。

redux-devtools里面仅仅监测到了一个INIT数据。

苏南大叔:redux教程,如何使用addDefaultCase添加默认系统监听? - 初始化init
redux教程,如何使用addDefaultCase添加默认系统监听?(图4-3)

addDefaultCase()则检测到了三条数据。

苏南大叔:redux教程,如何使用addDefaultCase添加默认系统监听? - defaultcase-data
redux教程,如何使用addDefaultCase添加默认系统监听?(图4-4)

相关文章

综述

更多redux的例子,请点击苏南大叔的博客文章:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   redux