redux教程，如何使用addDefaultCase添加默认系统监听？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

三种监听

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

addCase()

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

• https://newsn.net/say/redux-addcase.html
• https://newsn.net/say/redux-createasyncthunk-addcase.html

addMatcher()

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

• https://newsn.net/say/redux-addmatcher.html

addDefaultCase()

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

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

addDefaultCase()特例

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

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

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

相关文章

• https://newsn.net/say/redux-addmatcher.html
• https://newsn.net/say/redux-addcase.html
• https://newsn.net/say/redux-createasyncthunk-addcase.html

综述

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

• https://newsn.net/tag/redux/

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