如何在Redux异步Action中获取isScreenShareActive的最新状态

我编写了以下代码：
组件中的逻辑：

const isScreenShareActive = useSelector(selectIsScreenShareActive);
const toggleScreenshare = useCallback(async () => {
  dispatch(addDesktopTrack(isScreenShareActive)); // 修正原代码拼写错误：dipsatch → dispatch，addTesktopTrack → addDesktopTrack
}, [isScreenShareActive]);

Redux Slice中的异步Action：

const addDesktopTrack = async (isScreenShareActive) => {
  const response = await requestScreenShare();

  if (isScreenShareActive) {
    return;
  }

  // 后续更多代码...
}

需求：希望在addDesktopTrack()中获取最新的isScreenShareActive值。尝试过传递返回该状态的回调函数，但仍然拿到旧数据。另外，isScreenShareActive和addDesktopTrack属于不同的Redux Slice，不想直接在当前Slice中访问另一个Slice的状态。

解决方案 #

方法1：用Redux Toolkit的createAsyncThunk（推荐） #

如果项目基于Redux Toolkit，createAsyncThunk提供了getState方法，可以在异步逻辑中直接获取最新的全局状态，完全符合“不跨Slice直接依赖”的要求：

// 在addDesktopTrack所在的Slice文件中
import { createAsyncThunk } from '@reduxjs/toolkit';

// 定义异步Action
export const addDesktopTrack = createAsyncThunk(
  'screenshare/addDesktopTrack', // 替换成你的Action命名空间
  async (_, { getState }) => {
    const response = await requestScreenShare();
    
    // 从全局状态中提取最新的isScreenShareActive
    const latestIsActive = getState().screenShare.isScreenShareActive; // 替换成实际的Slice路径
    if (latestIsActive) {
      return;
    }

    // 执行后续逻辑
    // ...

    return response; // 返回处理结果供reducer使用
  }
);

组件中调用时无需传递参数，直接dispatch即可：

const toggleScreenshare = useCallback(async () => {
  dispatch(addDesktopTrack());
}, [dispatch]);

这种方式的核心是getState()会实时从Redux Store中拉取最新状态，不受闭包旧值的影响，同时保持了Slice之间的解耦。

方法2：组件内先完成异步操作再取最新状态（不推荐） #

如果不想修改Action结构，可以把异步逻辑移到组件中，等待requestScreenShare完成后再获取最新状态：

import { useStore } from 'react-redux';

const toggleScreenshare = useCallback(async () => {
  const response = await requestScreenShare();

  // 通过useStore获取最新状态
  const store = useStore();
  const latestIsActive = selectIsScreenShareActive(store.getState());

  if (latestIsActive) {
    return;
  }

  dispatch(addDesktopTrack(response));
}, [dispatch]);

对应的Action修改为接收请求结果：

const addDesktopTrack = (response) => {
  // 执行后续逻辑
  // ...
}

但这种方式会把异步逻辑从Redux Action移到组件中，违背了Redux集中管理副作用的设计原则，仅作为临时方案参考。

为什么传递回调无效？ #

你之前尝试的回调方式失效，是因为回调在组件渲染时就捕获了当时的isScreenShareActive闭包值，即使后续状态更新，回调内部的变量还是旧值。而getState()是直接从Store读取最新状态，完全避开了闭包的问题。

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