Redux中useSelector不更新状态：pieChart重置为空对象失败

问题现象 #

尝试通过resetPieChartAndAnalyzeState action将Redux状态state.portfolio.pieChart重置为空对象，但调用该action后，组件中通过useSelector获取的pieChart仍为之前的非空值。

相关代码 #

1. Portfolio Slice代码 #

const initialPortfolioState = {
  pieChart : {},
  analyzeObject: {},
  constructStartDate : null,
}

const portfolioSlice = createSlice({
  name: "portfolio",
  initialState: initialPorfolioState,
  reducers: {
    resetPieChartAndAnalyzeState: (state) => {     
      state.pieChart = {}
      state.analyzeObject = {}
      state.constructStartDate = null
      console.log('finished setting')
      console.log('the pie chart state is', state.pieChart)
    },
    // 其他reducer逻辑
  }
});

export const {resetPieChartAndAnalyzeState} = portfolioSlice.actions

2. 组件代码 #

import {resetPieChartAndAnalyzeState} from './portfolioSlice'

const Filters = () => {
  const { pieCharts, toAnalyze } = useSelector(portfolioSlice)

  console.log('pieChart') // 返回当前带有数据的pieChart对象

  const openPortfolioFromHeader: React.MouseEventHandler<HTMLDivElement> =() => {
    dispatch(resetPieChartAndAnalyzeState()); 
    console.log('pieCharts should be empty ')
  }

  console.log(pieCharts) // 为何返回非空对象？

  return (
   <>...</>
  )
}

问题原因及解决方法 #

1. useSelector使用方式错误 #

useSelector需要传入选择器函数，用于从Redux根状态中提取所需的部分，而不是直接传入slice对象。同时组件中存在变量名拼写错误：slice里的状态字段是pieChart，但组件中解构的是pieCharts。

修正方法：

import { useSelector, useDispatch } from 'react-redux'

const Filters = () => {
  const dispatch = useDispatch()
  // 正确从根state中提取portfolio模块的状态
  const { pieChart } = useSelector(state => state.portfolio)
  // ...
}

2. 忽略dispatch的异步性 #

dispatch是异步操作，调用后组件不会立刻重新渲染。因此在dispatch之后立刻console.log，拿到的还是旧状态。

修正方法：
使用useEffect监听pieChart的变化，在状态更新后打印：

import { useEffect } from 'react'

const Filters = () => {
  // ...
  useEffect(() => {
    console.log('更新后的pieChart:', pieChart)
  }, [pieChart]) // 依赖pieChart，状态变化时执行
}

3. 初始状态变量拼写错误 #

Slice中initialState赋值的变量名是initialPorfolioState（少了一个t），而定义的变量是initialPortfolioState，导致初始状态未正确设置，可能影响后续状态更新逻辑。

修正方法：

const portfolioSlice = createSlice({
  name: "portfolio",
  initialState: initialPortfolioState, // 修正拼写错误
  // ...
})

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