异步操作后如何在回调中正确获取更新后的Redux状态？

我用React+Django开发登录/CRUD项目，用Redux Store管理用户和帖子数据。使用createAsyncThunk发送后端请求并更新前端状态，但按钮点击回调里始终无法正确获取更新后的状态，存在延迟一步的问题。

最小可复现代码 #

App.js

import { useDispatch, useSelector } from "react-redux";
import { selectApi, getid } from "./store/slices/api";
import { useState, useEffect } from "react";
import { store } from "./store";

function App() {
    const dispatch = useDispatch();
    const apiState = useSelector(selectApi);
    const [ID, setID] = useState(0);

    useEffect(() => {
        setID(apiState.id);
        console.log(`In useeffect: ${ID}`);
    }, [apiState, ID]);

    const onclick = async () => {
        const x = await dispatch(getid()); 
        console.log(x.payload.id); // 正常输出
        console.log(apiState.id); // 无法获取最新值
        console.log(ID); // 无法获取最新值
        console.log(store.getState().api.id); // 示例中有效，但实际项目无效
    };

    return (
        <div className="App">
            <header className="App-header">
                <div>Hello</div>
                <button onClick={onclick}>Click</button>
            </header>
        </div>
    );
}

export default App;

store/index.js

import { configureStore } from "@reduxjs/toolkit";
import apiReducer from "./slices/api";

export const store = configureStore({
    reducer: {
        api: apiReducer,
    },
});

store/slices/api.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
const initialState = {
    id: 0,
};

export const getid = createAsyncThunk("api/add", async () => {
    const response = await axios.get("/api/id/"); // 返回随机整数
    return {
        id: response.data,
    };
});

export const apiSlice = createSlice({
    name: "api",
    initialState: initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(getid.fulfilled, (state, action) => {
            state.id = action.payload.id;
        });
    },
});

export const apiActions = apiSlice.actions;
export const selectApi = (state) => state.api;
export default apiSlice.reducer;

点击两次按钮的输出（服务器返回41、90） #

---------- First Click ---------
In useeffect: 0
41
0
0
41
In useeffect: 41 
---------- Second Click ---------
In useeffect: 41
90
41
41
90
In useeffect: 90

需求说明 #

不想使用异步thunk的返回值，希望统一从Redux Store获取状态，原因：

• 其他功能仅依赖Redux Store，保持代码风格统一简洁；
• API规格变更时无需修改事件处理逻辑，且部分API可能不返回值；
• TypeScript环境下，异步thunk返回值存在类型定义问题。

解决方案 #

核心原因 #

React组件中的apiState是闭包捕获的值，在组件渲染时确定。异步thunk完成后，Redux状态更新会触发组件重新渲染，但当前点击回调里的apiState还是旧值——因为回调是在之前的渲染周期创建的，持有当时的状态引用。

方法1：用useEffect监听状态变化 #

把依赖最新状态的逻辑放到useEffect中，监听apiState的变化，这是React函数组件的标准做法：

function App() {
    const dispatch = useDispatch();
    const apiState = useSelector(selectApi);

    // 监听apiState变化，处理后续逻辑
    useEffect(() => {
        // 这里可以拿到最新的apiState.id
        console.log(`最新ID: ${apiState.id}`);
        // 比如更新本地状态、触发其他业务操作等
    }, [apiState]);

    const onclick = async () => {
        await dispatch(getid());
        // 此处无需处理状态，逻辑交给useEffect
    };

    return (
        <div className="App">
            <header className="App-header">
                <div>Hello</div>
                <button onClick={onclick}>Click</button>
            </header>
        </div>
    );
}

方法2：用useRef保存最新状态 #

如果必须在点击回调内处理逻辑，可以用useRef实时同步最新状态，规避闭包问题：

function App() {
    const dispatch = useDispatch();
    const apiState = useSelector(selectApi);
    const latestApiState = useRef(apiState);

    // 同步最新状态到ref
    useEffect(() => {
        latestApiState.current = apiState;
    }, [apiState]);

    const onclick = async () => {
        await dispatch(getid());
        // 从ref中获取最新状态
        console.log(`最新ID: ${latestApiState.current.id}`);
    };

    return (
        <div className="App">
            <header className="App-header">
                <div>Hello</div>
                <button onClick={onclick}>Click</button>
            </header>
        </div>
    );
}

方法3：使用Redux的subscribe（不推荐在组件内直接使用） #

如果是类组件或需要全局状态监听，可以用Redux store的subscribe方法，但函数组件中更推荐前两种方案：

function App() {
    const dispatch = useDispatch();
    const apiState = useSelector(selectApi);

    useEffect(() => {
        const unsubscribe = store.subscribe(() => {
            const latestState = store.getState().api;
            console.log(`最新ID: ${latestState.id}`);
        });
        return unsubscribe; // 组件卸载时取消订阅，避免内存泄漏
    }, []);

    const onclick = async () => {
        await dispatch(getid());
    };

    return (
        <div className="App">
            <header className="App-header">
                <div>Hello</div>
                <button onClick={onclick}>Click</button>
            </header>
        </div>
    );
}

关键注意点 #

• 不要在回调中直接依赖闭包中的旧状态，React状态/Props更新会触发重新渲染，但旧回调仍持有之前的值；
• 优先使用useEffect分离异步操作和状态依赖逻辑，符合React的数据流设计；
• 避免直接调用store.getState()，它绕开了React-Redux的订阅机制，复杂场景下可能导致状态不同步。

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