关于redux-toolkit中的extraReducers

extraReducers 是 Redux Toolkit 的 createSlice 函数中的一个高级特性，它允许 slice 处理由其他部分的应用程序生成的 action

extraReducers 在 Redux Toolkit 的 createSlice 函数中提供了三种主要方法来定义额外的 reducer 行为：

1.addCase(actionCreator, caseReducer):

这个方法允许你指定一个 action creator 和一个 case reducer 函数。当由 createSlice 生成的 action creator 被 dispatch 时，将调用相应的 case reducer 函数来更新状态。这主要用于处理由当前 slice 生成的 action。

2.addMatcher(matcher, caseReducer):

addMatcher 方法接受一个 matcher 函数和一个 case reducer 函数。matcher 函数用于判断传入的 action 是否符合特定条件，如果条件为真，则调用 case reducer 函数来更新状态。这可以用于处理不是由当前 slice 生成的 action，而是基于 action 的结构或内容。

3.addDefaultCase(defaultCaseReducer):

addDefaultCase 方法允许你指定一个默认的 case reducer 函数。当没有其他 case reducer 或 matcher 匹配当前的 action 时，将调用这个默认的 case reducer 函数。这可以作为一个“兜底”逻辑，用于处理所有其他 reducer 未处理的 action。

import {createAction, createAsyncThunk, createSlice} from "@reduxjs/toolkit";

//额外的异步函数
export const userInformation2 = createAsyncThunk('user/userInformation2', async (arg, thunkAPI) => {
    console.log("执行了异步函数,userInformation2")
    return new Promise(resolve => {
        resolve({userId: 2, userName: 'fs2', email: 'fs2@gmail.com'})
    }).then((res) => {
        return res
    })
})

//创建一个函数
export const userInformation3 = createAction('user/userInformation3')

//创建一个未知的action
export const userInformation4=createAction('user/userInformation4')

const userInformation = createSlice({
    name: "userInformation",
    initialState: {
        userId: 1,
        userName: null,
        email: null,
    },
    reducers: {
        addUserInformation(state, action) {
            return {
                ...action.payload
            }
        },
        removeUserInformation(state, action) {
            console.log("删除信息")
            return {
                ...action.payload
            };
        }
    },
    extraReducers: (builder) => {
        //判断dispatch的类型是否触发
        //类型守卫
        function isRejectedAction(action) {
            console.log(action.type.endsWith('addUserInformation'))
            return action?.type.endsWith('addUserInformation');
        }
        //
        builder.addCase(userInformation2.fulfilled, (state, action) => {
            console.log("执行了异步函数,userInformation2.fulfilled", state, action)
            console.log(state)
            console.log(action)
            return {
                ...action.payload,
            }
        });
        builder.addCase(userInformation3, (state, action) => {
            console.log("createAction3", state, action)
            return {
                ...action.payload
            }
        })
        //isRejectedAction为true则执行后面的函数
        builder.addMatcher(isRejectedAction, (state, action) => {
            console.log("addUserInformation触发了")
        })
        //未知的action被触发时执行
        builder.addDefaultCase((state, action) => {
            console.log(`Received unknown action type: ${action.type}`);
            // 假设我们想在 state 中跟踪未知 action 的次数
        });
    }
})
export const {addUserInformation, removeUserInformation} = userInformation.actions
export default userInformation.reducer;