redux教程，解读createAsyncThunk函数的action参数

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

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

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

前情回顾

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

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

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

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

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

两种状态

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

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

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 || {})，这句话也可以引发异常。

监听配合

另外，既然把返回值抛出了，那么就比如配合有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;

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的。并不是其中某一部分数据。

另一种写法

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

上面的代码还可以写为：

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

相关文章

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

综述

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

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

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