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

本文还是继续探讨一下redux中的createAsyncThunk函数,在前边的文章里面,已经知道这个createAsyncThunk是用于制作一个特殊的异步请求函数的。它有三个状态,分别是pendingfulfilledrejected。可以通过监控这三种状态,实现获得返回值数据的目的。也可以不监控状态,直接dispatch传出返回值。

苏南大叔:redux教程,解读createAsyncThunk函数的action参数 - 解读createAsyncThunk函数的action参数
redux教程,解读createAsyncThunk函数的action参数(图6-1)

大家好,这里是苏南大叔的程序如此灵动博客,苏南大叔的代码日记本,高兴写啥就写啥。本文探讨,在createAsyncThunk中的神秘dispatch行为,所在的action参数,还藏有什么不为人知的秘密。测试环境: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

前情回顾

请先阅读下面的两篇文章,才能更好的理解本文的内容:

export const xxxxxxx = createAsyncThunk(
  'type',
  async (xxx,action)=>{}
);

本文聚焦于上述代码中的action。它有如下几个方法:

  • fulfillWithValue()
  • rejectWithValue()
  • dispatch()
  • getState()

苏南大叔:redux教程,解读createAsyncThunk函数的action参数 - async-thunk-action
redux教程,解读createAsyncThunk函数的action参数(图6-2)

两种状态

createAsyncThunk有两个参数,一个是定义好的type,另外一个是个asyncpromise函数。
既然是promise,那必然会有resolve()reject()两者情况。那么,在createAsyncThunk中,就体现为:

  • action.fulfillWithValue()
  • action.rejectWithValue()

苏南大叔:redux教程,解读createAsyncThunk函数的action参数 - 两种状态
redux教程,解读createAsyncThunk函数的action参数(图6-3)

export const go_club = createAsyncThunk(
  'warning/goClub', // type
  async (money,action)=>{
      console.log(action);
      const res = await fetchCount(money || {})
      const money_left = Number(res.data) | 0;
      console.log("剩下的钱数"+ money_left);
      console.log("粮食储备",action.getState()); //列出所有的slice里面的state
      action.dispatch(need2("job"));
      if(money_left % 2 != 0){
        return action.rejectWithValue(money_left)
      }
      return action.fulfillWithValue(money_left)
      //return money_left;
  }
)

对于action.fulfillWithValue(data),可以直接写成return data。所以,它的存在感并不是很强。

这里需要特别强调的是:
不是只有action.rejectWithValue()会走到addcase.rejected流程。任何的异常都会导致流程走向addcase.rejected流程。比如const res = await fetchCount(money || {}),这句话也可以引发异常。

苏南大叔:redux教程,解读createAsyncThunk函数的action参数 - 引发异常的情况
redux教程,解读createAsyncThunk函数的action参数(图6-4)

监听配合

另外,既然把返回值抛出了,那么就比如配合有addCase()的状态监听行为,并且使用action.payload获得返回参数。

export const husband = createSlice({
  name: 'husband',
  initialState :{
    have: [],
  },
  reducers: {
    need2 : (state, action) => {
      state.have.push(action.payload);
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(go_club.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(go_club.fulfilled, (state, action) => {
        state.status = 'idle';
        console.log("fulfilled",action);
        state.value += action.payload;
      })
      .addCase(go_club.rejected, (state, action) => {
        state.status = 'reject';
        console.log("error",action);
        state.error = action.error.message;
      });
  },
});
export const reducer_2 = husband.reducer;
export const { need2 } = husband.actions;

苏南大叔:redux教程,解读createAsyncThunk函数的action参数 - addcase-hooks
redux教程,解读createAsyncThunk函数的action参数(图6-5)

action.dispatch()

action.dispatch()函数可以直接执行其它函数,从而改变state或者执行其它动作。

export const go_club = createAsyncThunk(
  'warning/goClub', // type
  async (money,action)=>{
      console.log(action);
      //......
      action.dispatch(need2("job"));
      //......
  }
)

action.getState()

action.getState()可以获取当前的state,值得说明的是:这里拿到的state是包含所有的slice分支的state的。并不是其中某一部分数据。

苏南大叔:redux教程,解读createAsyncThunk函数的action参数 - data-state
redux教程,解读createAsyncThunk函数的action参数(图6-6)

另一种写法

  async (money,action)=>{
    //...
    action.getState();
    action.dispatch();
    action.rejectWithValue();
    action.fulfillWithValue();
    //...
  }

上面的代码还可以写为:

  async (money,{rejectWithValue,fulfillWithValue,dispatch,getState})=>{
    //...
    getState();
    dispatch();
    rejectWithValue();
    fulfillWithValue();
    //...
  }

相关文章

综述

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

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

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

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

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