Redux Toolkit中useSelector首次点击不更新，二次点击才生效问题排查

我在项目中使用Redux Toolkit构建状态管理，编写了如下slice代码（包含createAsyncThunk异步请求逻辑）：

//status : idle, loading, succeeded, failed
const initialState = {
    info:'a',
    status:'idle',
    error:null
}

//to get data from server 
export const fetchFeatureInfoById = createAsyncThunk('feature/fetchInfoById', async (originalData) => {
    console.log('fetchFeatureInfoById originalData ', originalData);
    const response = await axios.get(FEATURE_URL+'/feature/'+originalData.id+'/'+originalData.category)
    console.log('DATA from server ', response);
    return response.data
})

//slice with reducers 
export const featuresSlice = createSlice({
    name: 'features',
    initialState,
    reducers: { 
        featureInfoById:{
            reducer(state, action){
                //do something with the id 
                console.log('feature state ', ' -- state : ',state.status, ' -- action : ', action);
            },
            prepare(category, id){
                return{
                    payload:{
                        category,
                        id
                    }
                }
            }
        }
    },
    extraReducers(builder){
        builder
        .addCase(fetchFeatureInfoById.pending, (state, action) => {
            state.status = 'loading'
        })
        .addCase(fetchFeatureInfoById.rejected, (state, action) => {
            state.status = 'failed';
            return state;
            // state.error = action.error.message;
            console.log('rejected data store ', state, action); 
        })
        .addCase(fetchFeatureInfoById.fulfilled, (state, action) => { 
            // state.status = 'succeeded';
            // state.info = action.payload;
            let a = {
                info:action.payload,
                status:'succeeded',
                error:null
            }
            return a;
            // console.log('fulfilled data store ', state, action);
            // return action.payload;
        })
    }
  }) 

//exporting just info of feature
export const featureInfo = (state) => state.features.info; 

在React组件中，我通过useSelector获取featureInfo状态，并编写点击事件触发异步请求：

import store from '../redux/store'; 
import {useSelector,useDispatch} from "react-redux"; 
import { featureInfo, featureError, featureStatus, featureInfoById, fetchFeatureInfoById } from "../redux/features";
import { useRef, useEffect, useState } from 'react';  

const featureInfoA = useSelector(featureInfo) 
const clickFeatureFromList =( sl, s, id, e, groupid, c) => (event, isExpanded) =>  { 
    store.subscribe(()=>{
      const state = store.getState()
      if (state.features.status=='succeeded' || state.features.status=='failed') {
        console.log('BINGO SUBSCRIBE ', featureInfoA); 
      } 
    })

    dispatch(fetchFeatureInfoById({id, category:'ex'}))
    .then((e)=>{
      console.log('BINGO THEN ', featureInfoA, featureErrorA, featureStatusA);
      accordionDetailsRootGlobal.render(<ContextInfo/>);
    }) 
  }

首次点击按钮调用该方法时，日志显示状态仍为初始值'a'，未更新：

BINGO SUBSCRIBE  a
BINGO THEN  a null idle

二次点击时状态才正常更新：

BINGO SUBSCRIBE  a
BINGO SUBSCRIBE  {success: false, msg: 'resolved error'}
BINGO SUBSCRIBE  {success: false, msg: 'resolved error'}
BINGO THEN  {success: false, msg: 'resolved error'} null succeeded 

我尝试修改fetchFeatureInfoById.fulfilled的写法但无效，请问为何首次点击状态不更新？问题出在哪里？

核心问题1：闭包捕获旧状态值 #

featureInfoA是组件渲染时通过useSelector获取的状态，被闭包捕获在clickFeatureFromList函数内部。Redux状态更新后，组件会重新渲染生成新的featureInfoA，但首次点击触发的回调引用的还是初始渲染时的旧值，因此日志打印的始终是初始值'a'。

核心问题2：手动订阅store的错误用法 #

在点击事件中每次添加新订阅，会导致重复订阅，且订阅回调里访问的featureInfoA同样是闭包捕获的旧值，无法获取最新状态。正确做法是通过useSelector自动监听状态变化，而非手动订阅store。

核心问题3：Thunk的then回调无法获取最新组件状态 #

dispatch(fetchFeatureInfoById()).then(...)的回调执行时，组件还未完成重新渲染，此时featureInfoA依然是更新前的旧值。

修复步骤： #

1. 移除手动订阅，改用useSelector+useEffect监听状态

// 组件内直接监听所需状态
const featureInfoA = useSelector(featureInfo);
const featureStatusA = useSelector(state => state.features.status);
const featureErrorA = useSelector(state => state.features.error);

// 用useEffect处理状态更新后的逻辑
useEffect(() => {
  if (featureStatusA === 'succeeded' || featureStatusA === 'failed') {
    console.log('状态更新', featureInfoA);
    accordionDetailsRootGlobal.render(<ContextInfo/>);
  }
}, [featureStatusA, featureInfoA]);

2. 简化点击事件，仅负责触发异步请求

const clickFeatureFromList = (sl, s, id, e, groupid, c) => (event, isExpanded) => { 
  dispatch(fetchFeatureInfoById({id, category:'ex'}));
};

3. 优化slice的状态更新逻辑
   Redux Toolkit推荐使用Immer的可变更新方式，更直观易读：

.addCase(fetchFeatureInfoById.fulfilled, (state, action) => { 
  state.status = 'succeeded';
  state.info = action.payload;
  state.error = null;
})

// 修正rejected分支的错误处理
.addCase(fetchFeatureInfoById.rejected, (state, action) => {
  state.status = 'failed';
  state.error = action.error.message;
})

修改后，首次点击触发状态更新时，组件会自动重新渲染，useEffect会捕获到最新状态值并执行对应逻辑，日志也会显示正确的更新后状态。

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