PayloadAction定义error的payload在“builder callback”模式报错

Question

老师，您好！
使用如下的方式写extraReducers能够正常运行

但是Console栏有这样一行警告：

createSlice.ts:335 The object notation for createSlice.extraReducers
is deprecated, and will be removed in RTK 2.0. Please use the ‘builder
callback’ notation instead:
https://redux-toolkit.js.org/api/createSlice

于是我改为“builder callback”模式，于是出现这样的错误：

把鼠标移动到红色波浪线上，可以看到如下提示

productDetail/slice.ts其它行代码

请问PayloadAction定义rejected的action为什么会报错呢？

但是如果不定义rejected的action，state.error又会报错

错误

错误的提示内容：

当我把error的定义改为any，

Answer 1

阿莱克斯刘 2023-03-08 15:49:25

感谢分享，你的代码过程逻辑非常合理，置顶收藏。

不过有个小问题，在最后处理error的时候，报错信息已经很明确了

这里的报错是什么意思呢？他的意思就是说 action.payload 是一个 Unknown 类型的数据，Unknown类型无法直接给 “string | null”类型的数据赋值。

那么这个 Unknown 有是个什么东西呢？其实它与Any类型非常相似，不过虽然Unknown与Any可指代任何类型，但它却能保证类型安全，不会想any一样出现运行时报错。一般来说，我们可以通过 “if + typeof” 的组合来解构Unknown 类型变量来保证类型安全。

所以，我们可以在不改 state.error 为any类型的情况下， 修改一下你的 extraReducers/rejected，应该就能解决类型适配的问题。代码如下：

if(typeof action.payload === "string" || typeof action.payload === "null") {
    state.error = action.payload
}

更多关于Unkonwn的资料请查看下面的链接：

Any 与 unknow_2小时极速入门 TypeScript-慕课网 (imooc.com)

• 提问者 suyx #1

  老师，您好！谢谢回复！谢谢您的认可，很受鼓舞！
  
  如果定义error: string | null;
  然后在 extraReducers/rejected写
  if(typeof action.payload === "string" || typeof action.payload === "null") {
      state.error = action.payload
  }
  typeof action.payload === "null"这里会被画红色波浪线，报错如下：
  此比较似乎是无意的，因为类型“"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"”和“"null"”没有重叠。
  
  还有个疑问。
  state.error = action.error.message会不会更好？
  
  我设了个错误的请求地址以便出现请求错误，此时在extraReducers/rejected这里打印action，payload是undefined，错误都在error中。