Redux Toolkit+TypeScript中extraReducers的builder.addCase报错如何解决？

报错原因 #

这个报错是@typescript-eslint/no-unused-expressions校验规则触发的，核心问题出在extraReducers回调的语法上：
你在builder.addCase(createCharacter.pending, handlePending)行末尾使用了逗号(,)，而当前回调是用大括号包裹的普通函数体，逗号在这里属于无效符号，这行代码就变成了没有被赋值、也没有被调用的无效表达式，因此触发了规则报错。
VS Code未提示异常通常是本地编辑器的ESLint插件加载不完全，或者本地规则配置和构建环境的规则严格度不一致导致的。

修复方案 #

有两种常用的修复方式，任选其一即可：

方案1：使用链式调用写法（推荐） #

builder.addCase本身支持链式调用，你可以去掉函数体的大括号，用隐式返回的写法，既符合Redux Toolkit的推荐写法，也能避免报错：

extraReducers: builder => builder
  .addCase(createCharacter.pending, handlePending)
  // 后续其他addCase直接链式追加即可
  // .addCase(createCharacter.fulfilled, handleFulfilled)
  // .addCase(createCharacter.rejected, handleRejected)

方案2：保留大括号写法，替换逗号为分号 #

如果你习惯用大括号包裹函数体，只需要把每行末尾的逗号替换为分号（或直接删除行尾多余的逗号）即可：

extraReducers: builder => {
  builder.addCase(createCharacter.pending, handlePending);
  // 后续其他addCase正常书写，行尾用分号结尾
  // builder.addCase(createCharacter.fulfilled, handleFulfilled);
  // builder.addCase(createCharacter.rejected, handleRejected);
}

内容的提问来源于stack exchange，提问作者Nikita Fedorov