Redux全局状态同步至本地状态的实现求助（解决数据仅刷新后显示的问题）

嘿，我懂你的处境——虽说Redux官方并不推荐把全局状态同步到本地组件的state里，但业务需求摆在这儿，咱们得先解决问题再说规范。

先帮你捋捋现有代码的问题：你之前的过滤逻辑只监听了selectedDevicelocation的变化，但Redux里的device数据更新时，这个effect根本不会触发，加上初始挂载时dispatch(devices())是异步的，直接在挂载effect里setFilteredList(device)拿到的只是Redux的初始空值，自然看不到实时数据。

给你调整后的代码，直接就能实现全局到本地的同步：

const { device } = useSelector((state) => state.device);
const [filteredList, setFilteredList] = useState();
const dispatch = useDispatch(); // 别忘了声明dispatch，你之前的代码里可能漏了

// 组件挂载时触发数据请求
useEffect(() => {
  dispatch(devices());
}, [dispatch]);

// 关键：同时监听device和selectedDevicelocation的变化
useEffect(() => {
  // 先判断device是否存在，避免初始状态下undefined导致的报错
  if (!device) return;
  
  const filteredData = FilterDevicelocation(device);
  setFilteredList(filteredData);
}, [device, selectedDevicelocation]);

为什么这样能解决问题？ #

1. 当你dispatch(devices())成功后，Redux的device状态会更新，此时useSelector会感知到变化并返回新的device值；
2. 因为我们把device加入了第二个effect的依赖数组，它会立刻重新执行过滤逻辑，把最新的过滤结果同步到filteredList里，页面就能实时渲染了；
3. 保留selectedDevicelocation在依赖里，确保用户切换筛选条件时也能重新过滤数据。

最后再啰嗦一句：如果后续业务允许，尽量直接基于Redux的device状态做计算（比如用useMemo代替本地state），这样能避免不必要的状态同步逻辑，但当前场景下这个方案完全能满足你的需求。

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