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

reduxtoolkit中,提供了很多is开头的函数。这些is系列的函数,都是一些助手性质的函数,有了更好,没有也没有啥问题。本文中就对这些is系列的是否判断函数做个总结。再次声明,这些函数都是可以替代的。

苏南大叔:redux教程,如何理解一系列提供是否判断功能的is函数? - 系列是否判断函数
redux教程,如何理解一系列提供是否判断功能的is函数?(图2-1)

大家好,这里是京城非著名互联网从业人员苏南大叔的技术博客,写写代码吹吹风的自留地。本文描述如何使用reduxtoolkit中的一系列is函数。这些函数都是从@reduxjs/toolkit导入的。测试环境: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

isAllOf/isAnyOf

import { isAllOf,isAnyOf } from '@reduxjs/toolkit';

通俗的理解一下的话,isAllOf()就是&&isAnyOf()就是||。但是,这两个函数的内部条件是效率方面考虑的。苏南大叔是这么理解的:

  • isAllOf(A,B,C...)的话,如果Afalse的话,后面的BC系列都不必执行了,整体返回false
  • isAnyOf(A,B,C...)的话,如果Atrue的话,后面的BC系列都不必执行了,整体返回true

苏南大叔:redux教程,如何理解一系列提供是否判断功能的is函数? - 函数示例
redux教程,如何理解一系列提供是否判断功能的is函数?(图2-2)

isRejectedWithValue/isRejected

判断action的状态是否是Rejected状态。

import { isRejectedWithValue,isRejected } from '@reduxjs/toolkit';

这个两个函数的理解,还需要看看下面的这篇文章:

测试代码:

export const go_club = createAsyncThunk(
  'warning/goClub', // type
  async (money,action)=>{
      const res = await fetchCount(money || {})
      if(money_left % 2 != 0){
        return action.rejectWithValue(money_left)
      }
      return action.fulfillWithValue(money_left)
      //return money_left;
  }
)
export const husband = createSlice({
  name: 'husband',
  initialState :{
    have: [],
  },
  reducers: {
  },
  extraReducers: (builder) => {
    builder
      .addCase(go_club.rejected, (state, action) => {
        state.status = 'reject';
        console.log(isRejectedWithValue(action));
        console.log(isRejected(action));
      });
  },
});

苏南大叔理解着,两个的区别就是:

  • isRejectedWithValue(action),就是写代码的人主动rejected的错误信息。
  • isRejected(action),就是由于网络等等原因,被动得到的rejected错误信息。

当然,这里还有个不是太靠谱的类似判断标准,仅供参考:

action.type.endsWith('/rejected')

isFulfilled/isPending

import { isFulfilled,isPending } from '@reduxjs/toolkit';
  • isFulfilled(action),判断是不是请求完成的状态。虽然确实有fulfilledWithValue(msg),但是,没有isFulfilledWithValue(action)函数。
  • isPending(action),判断是不是请求未决的状态。

isAsyncThunkAction

import { createAsyncThunk,isAsyncThunkAction } from '@reduxjs/toolkit';

这个就可以好理解了,这种createAsyncThunk创建的AsyncThunkAction,比普通的createAction创建的action。有很多优势之处。比如:有三种状态变化,可以携带返回值用于监听等等。参考文章:

所以使用isAsyncThunkAction(action)进行判断,也是有场景需求的。

相关文章

综述

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

助理微信

微信打赏码

微信公众号

微信小程序

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

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

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

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