Reducer状态更新异常：首次点击不生效，二次点击才更新hasError

1. Redux状态更新的异步性：dispatch(setUnassign(name)) 后立刻执行 console.log(workflow)，此时saga的异步处理还未完成，Redux状态尚未更新，组件也没触发重新渲染，所以拿到的是更新前的旧状态。
2. useSelector解构错误：你的代码中 const {tasks, workflow} = useSelector((state: IRootState) => state.workflow); 存在逻辑错误——state.workflow 本身就是 IWorkflowState 类型，它包含的字段是 tasks、taskId、hasError，并没有 workflow 这个子属性，这会导致你读取的状态值错误。

1. 修正useSelector的状态读取方式 #

直接从state.workflow中解构需要的字段，比如hasError和tasks：

const DisActionConnected: React.FC = () => {            
  const dispatch = useDispatch();
  // 修正解构逻辑，直接获取目标状态字段
  const { tasks, hasError } = useSelector((state: IRootState) => state.workflow);            
  const onUnassign = () => {
    if (tasks && tasks.length > 0) {
      dispatch(setUnassign(name));
    }
  };            

  // 通过useEffect监听hasError变化，查看更新后的状态
  useEffect(() => {
    console.log('当前hasError状态:', hasError);
  }, [hasError]);

  return (
    <div>
      <DisActions
        userId={userId}
        onUnassign={onUnassign}
      />
    </div>
  );
};

2. 避免在dispatch后立即读取状态 #

Redux状态更新是异步流程：dispatch action → saga处理逻辑 → 触发reducer更新状态 → 组件重新渲染获取新状态。因此dispatch后立刻读取的始终是旧状态，应通过useEffect监听状态变化来查看更新后的值，或者直接在组件渲染逻辑中使用hasError（比如渲染错误提示）。

3. 确认Saga的action类型匹配 #

确保WorkflowStore.TASK_UNASSIGN_PENDING和setUnassign中返回的type是同一个常量，避免因类型不匹配导致Saga未触发。建议定义统一的action类型常量：

// 统一声明action类型常量
export const TASK_UNASSIGN_PENDING = 'TASK_UNASSIGN_PENDING';
export const WORKFLOW_VALIDATION_DATA_ERROR = 'WORKFLOW_VALIDATION_DATA_ERROR';

// action创建函数
export const setUnassign = (name: string) => {            
  return {
    type: TASK_UNASSIGN_PENDING,
    payload: { name }
  }
};

// Saga中使用同一个常量
function* workflowSaga() {
  yield takeEvery(TASK_UNASSIGN_PENDING, setUnassignDis);
}

4. 验证Reducer逻辑 #

你的Reducer逻辑是正确的，WORKFLOW_VALIDATION_DATA_ERROR分支会返回新的状态对象并设置hasError: true，无需修改。

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