使用createAsyncThunk删除Todo状态项失效，请求技术排查

问题原因 #

1. 异步操作时序错误 #

deleteTodo是通过createAsyncThunk创建的异步action，内部包含await wait(1000)的延迟逻辑。你在调用store.dispatch(deleteTodo(1))后立刻执行console.log(store.getState().todoReducer)，此时异步任务还未完成，deleteTodo.fulfilled对应的reducer还没有触发，状态自然没有更新。

2. Reducer写法可优化（非核心原因） #

虽然返回新数组的写法在RTK中是允许的，但RTK基于Immer实现，推荐使用可变更新语法修改状态，更符合工具库的设计习惯，也能避免潜在的状态更新问题。

解决方法 #

方法一：等待异步任务完成后打印状态 #

修改index.ts代码，使用async/await等待异步dispatch完成：

import { store } from "./slices";
import { Todo } from "./Todo";
import { deleteTodo } from "./slices";

const todo1: Todo = { id: 1, title: "Do homework", completed: true }
const todo2: Todo = { id: 2, title: "Wake up", completed: true }

store.dispatch({ type: 'todo/addTodo', payload: todo1 })
store.dispatch({ type: 'todo/addTodo', payload: todo2 })

// 等待异步删除完成后打印最新状态
(async () => {
  await store.dispatch(deleteTodo(1));
  console.log(store.getState().todoReducer);
})();

方法二：通过订阅监听状态变化 #

使用store.subscribe监听状态更新，确保状态变化后再输出：

import { store } from "./slices";
import { Todo } from "./Todo";
import { deleteTodo } from "./slices";

const todo1: Todo = { id: 1, title: "Do homework", completed: true }
const todo2: Todo = { id: 2, title: "Wake up", completed: true }

store.dispatch({ type: 'todo/addTodo', payload: todo1 })
store.dispatch({ type: 'todo/addTodo', payload: todo2 })
store.dispatch(deleteTodo(1))

// 订阅状态变化，每次更新后打印最新状态
store.subscribe(() => {
  console.log(store.getState().todoReducer);
});

优化Reducer写法（可选） #

修改slices.ts中extraReducers的逻辑，使用Immer的可变更新方式：

extraReducers: (builder) => {
  builder.addCase(deleteTodo.fulfilled, (state, action) => {
    const targetIndex = state.findIndex(todo => todo.id === action.payload);
    if (targetIndex !== -1) {
      state.splice(targetIndex, 1);
    }
  })
}

内容的提问来源于stack exchange，提问作者Hoàng Trung Nam