reduxjs/toolkit中useSelector无法获取更新后的state问题求助

你的Slice写法没有问题（Redux Toolkit的Immer已经自动处理了状态不可变性），问题出在状态更新后的调用时机上：Redux的dispatch是同步执行的，但组件并不会在dispatch完成后立刻重新渲染。当前组件里的price变量是闭包捕获的旧值，所以在priceHandler里dispatch后立刻调用sendRequest，拿到的还是更新前的值。

以下是两种可行的解决方案：

方案1：直接使用当前选中的值调用请求 #

既然在priceHandler中已经拿到了最新的选中值，直接将其作为参数传给sendRequest，无需等待Redux状态同步到组件：

const sendRequest = async (currentPrice) => {
  console.log("priceInSendRequestFunction = ", currentPrice);
}

const priceHandler = event => {
  const newPrice = event.target.value === "" ? "any" : event.target.value;
  dispatch(userActions.changePrice(newPrice));
  sendRequest(newPrice); // 直接传递最新值
}

方案2：用useEffect监听状态变化触发请求 #

如果sendRequest需要依赖多个Redux状态（比如price、type、carName等），可以通过useEffect监听这些状态的变化，当它们更新时自动执行请求：

import { useEffect } from 'react';

const Filters = () => {
  const type = useSelector(state => state.user.type);
  const price = useSelector(state => state.user.price);
  const carName = useSelector(state => state.user.carName);
  const availablity = useSelector(state => state.user.availablity);

  const sendRequest = async () => {
    console.log("priceInSendRequestFunction = ", price);
    // 此处可使用所有最新的状态值
  }

  // 监听目标状态，变化时自动调用请求
  useEffect(() => {
    sendRequest();
  }, [price, type, carName, availablity]); // 依赖数组包含所有需要监听的状态

  const priceHandler = event => {
    const newPrice = event.target.value === "" ? "any" : event.target.value;
    dispatch(userActions.changePrice(newPrice));
  }

  // 组件返回部分保持不变
}

补充说明 #

Redux的dispatch会同步更新store内的状态，但组件的重新渲染是异步调度的。也就是说，dispatch完成后store里已经是新状态，但当前组件的变量（如price）是之前渲染时捕获的旧值，只有当组件重新渲染后，useSelector才会获取到新状态并更新变量。

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