Redux addCase fulfilled回调中如何正确赋值用户数组

报错核心原因 #

出现Type 'User[]' is not assignable to type '(() => Element)[]'的根本原因是TypeScript未正确推导thunk方法的返回值类型，代码里存在三个显性问题：

• createAsyncThunk未传入明确的泛型参数，TS无法自动识别response.data的类型为User[]
• thunk方法的入参定义错误：async (users: [])将入参定义为永空的元组类型，且无入参场景下多余定义users参数，和后续状态字段重名引发类型推断冲突
• 未给slice的initialState明确标注UserState类型，可能存在初始值类型推导偏差

修复方案 #

1. 修正异步thunk定义 #

给createAsyncThunk传入明确的泛型参数，移除多余的错误入参定义：

// 泛型第一个参数为成功状态返回的payload类型，第二个参数为thunk入参类型，无入参填void
export const getUsers = createAsyncThunk<User[], void>(
  'user/fetchUsers',
  async () => {
      const response = await fetchUsers();
      // 如果fetchUsers未做类型封装，可加类型断言确保返回类型正确：return response.data as User[]
      return response.data;
  }
);

2. 修正slice配置 #

给初始值明确绑定类型，补全异步动作的全状态处理，避免歧义命名：

const userSlice = createSlice({
    name: 'user',
    initialState: initialState as UserState,
    reducers: {},
    extraReducers: builder => {
        builder
          .addCase(getUsers.pending, (state) => {
              state.loading = true;
              state.error = null;
          })
          .addCase(getUsers.fulfilled, (state, action) => {
              state.loading = false;
              state.status = 'idle'; // 确认'idle'为userStatus联合类型的合法成员
              state.users = action.payload;
              state.error = '';
          })
          .addCase(getUsers.rejected, (state, action) => {
              state.loading = false;
              state.error = action.error.message;
          })
    }        
})

3. 可选优化 #

如果项目中封装了fetchUsers请求方法，建议给方法明确标注返回值类型：

// 示例
const fetchUsers = async (): Promise<{data: User[]}> => {
  return axios.get('/api/users')
}

配置后TS可自动推导返回值类型，不需要额外加类型断言。

内容的提问来源于stack exchange，提问作者Silly Postdoc