Redux dispatch后无法获取最新state值的解决方法咨询

• 每次React组件渲染时都会生成独立的闭包作用域，你当前渲染周期通过useSelector拿到的counter是固定的常量，在本次渲染的所有回调、异步函数里访问的都是这个旧值。
• 你执行dispatch后，Redux的store确实会立刻更新，但组件需要触发重新渲染才能拿到更新后的counter值，你在then回调里访问的还是本次渲染的旧counter，因此两次打印值一致。

方案1：在thunk中通过getState获取最新state（推荐） #

Redux Thunk 中间件执行thunk函数时，会自动传入dispatch和getState两个参数，你可以直接在thunk中拿到更新后的最新state返回即可。
修改后的App.js代码如下：

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

function App() {
    const dispatch = useDispatch()
    const counter = useSelector(state => state.counter)

    // 改写为标准thunk函数
    const increment = () => {
        return (dispatch, getState) => {
            dispatch({ type: 'increase' })
            // 直接返回更新后的counter值
            return getState().counter
        }
    }

    const onClickIncrease = async () => {
        console.log('Before dispatch:', counter)
        // dispatch执行thunk会返回thunk的返回值，这里就是最新的counter
        const newCounter = await dispatch(increment())
        console.log('After dispatch:', newCounter)
    }

    return (
        <div>
            <button onClick={onClickIncrease}>
                +
            </button>
            <p>当前counter值：{counter}</p>
        </div>
    )
}

export default App

方案2：通过useEffect监听counter变化 #

如果不需要在点击回调里直接拿到新值，只是需要在counter更新后执行逻辑，可以用useEffect监听counter的变化，组件重新渲染后会自动触发回调：

// 在App组件内添加这段
useEffect(() => {
  // 这里的counter已经是更新后的新值
  console.log('After dispatch:', counter)
}, [counter])

const onClickIncrease = () => {
    console.log('Before dispatch:', counter)
    dispatch({ type: 'increase' })
}

不要尝试直接修改useSelector返回的state值，所有state更新必须通过dispatch action触发reducer修改。

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