redux教程，如何理解一系列提供是否判断功能的is函数？

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

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

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

isAllOf/isAnyOf

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

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

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

isRejectedWithValue/isRejected

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

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

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

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

测试代码：

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。有很多优势之处。比如：有三种状态变化，可以携带返回值用于监听等等。参考文章：

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

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

相关文章

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

综述

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

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

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